Mobile Header expanding after tapping hamburger menu

Support
21

I looked at your site quickly, @McBlu. It looks like there’s a box-shadow on .d-header in your common CSS somewhere that’s causing the issue. At least, removing that box-shadow in my testing stopped the header from expanding.

4 Likes
22

@McBlu Yours is being caused by the Menu

24

Thanks, Joe. Why would a box shadow cause this issue?

25

In this case, I have no clue. It was just the only custom CSS I could find on the header. But removing it made the header assume it’s expected position. :man_shrugging:

2 Likes
26

Did you recreate the problem in a browser? If so, how? I can probably fix mine if I can get the problem to resurface in a browser with firebug

27

That’s interesting. I really appreciate you taking the time to look at that for me. I am very new to troubleshooting web code. I’ll play with that right now. Back at desk.

2 Likes
28

I couldn’t get my normal process (Chrome with device simulation) to show the problem at all. But I plugged my iPhone into my Mac and pulled up the dev tools on it through Safari. I couldn’t get the issue any other way and couldn’t debug it directly on the phone.

1 Like
29

Same thing here, im on a windows PC, I don’t think I can debug that way

30

Which code did you delete?


nav#bar:before {
	content: “”;
	position: absolute;
	width: 250vw;
	height: 100%;
	top: 0;
	left: -125vw;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
}

.d-header {
	box-shadow: none;
}
.lightbox-wrapper {
    display: block;
    text-align: center;
}
31

I removed this entire section.

1 Like
32

So anything that touches the header breaks it… ?

Interestingly… in landscape mode…

image
24FA90D8-9DB2-464A-A8CA-44104A204D9E.png1136×640 75.5 KB

1 Like
33

Okay so that brings back the shadow after the header which I didn’t want as the header and after header are to appear as one header. And it didn’t fix the problem on my iPhone. Weird.

2 Likes
34

Seems like it only happens on your homepage. Am I off on that?

2 Likes
35

Is emoji.scss core?

Whats with this:

.d-header {
    width: 100%;
    position: relative;
    top: 0;
    z-index: 1000;
    background-color: #000;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}
36

I think you are right, Joe.

37

I believe this is the after header code. @III kindly helped me with this as I am not a coder.

38

Ok, found the problem…

emoji.scss:246:

.d-header {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1000;
    background-color: #000;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}

I re wrote the CSS rules like so:

   .d-header {
    width: 100% !important;
    position: relative !important;
    top: 0;
    z-index: 1000 !important;
    background-color: #000;
    box-shadow: none !important;
    height: 60px;
  }

Partly fixed the problem but the icons all disappear still

39

I wonder what happened that all of a sudden our css code is a problem?

1 Like
40

Someone re-wrote something probably… I still think it is a bug

41

So, if I remove my custom top menu from header everything works fine… Not really a fix as I want that custom top menu… :thinking: