Mobile Header expanding after tapping hamburger menu

الدعم
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 إعجابات
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)
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)
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)
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)
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)
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)
34

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

إعجابَين (2)
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)
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: