A bug in menu static mode


#1

Hi there,

I was asking this question in this post previously. The problem was solved. However, after the update of the sydney theme, the problem comes back.

Problem: The menu covers the content. This is one of the pages can showcase the problem. Please have a look.

Once the Sydney theme updated to 1.34, the menu becomes covering the content. Please help.


#2

Hello there,

I would like to apologize in advance for the delay.

Try to apply the below custom CSS code into Additional CSS option under Appearance > Customize.


body:not(.home) #masthead.site-header{
  position: relative !important;
}

Once you’re done, you should delete the cache from WP Super Cache plugin.

Let me know how it goes.

Regards,
Kharis


#3

It works. Thanks for your help!! Great to have Kharis always


#4

No worries. Just go easy on it. :slight_smile:

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis


#5

Hello! I seem to have a similar problem, and I tried to follow your instructions in this thread, unsuccessfully though.

My menu problem looks like this: https://snag.gy/WuIsk0.jpg

Coincidentally, it works perfectly well when using chrome. But the problem manifests when using safari, and unfortunately, it’s important for me that it works properly in safari.


#6

I realized that maybe I should provide a link to the website as well: http://preview.tinyurl.com/hdxxd66

I hope somebody sees this!


#7

Hello @reditz,

Thank you for reaching out to us here. The menu bar looks fine to me on both Chrome and Safari as seen on the screenshots below.

On Chrome:

On Safari:

Have you been able to resolve it? Or, am I missing something? Please advise.

Regards,
Kharis


#8

Hello! Thanks for a fast reply!

It’s a bit strange, but I cleared the chache for the website but I still get the same problem. The menu collapses into the slider and header. And it only occurs in safari, I actually was able to recreate it once in chrome as well, but after clicking around it disappears.

Did you try clicking around in the menu? Is it stable for you? Maybe there’s just something wrong with my computer.

The only thing that I have tried to do to fix it is to follow your instructions on this thread, by inserting this:

body:not(.home) #masthead.site-header{
position: relative !important;
}

into the Additional CSS section, as you mentioned.


#9

Hello there,

I saw the issue after resizing the browser’s window smaller, it was about less than 1024.

Try adding this CSS:


.site-header.fixed{
  position: relative !important;
}

Let me know how it goes.

Regards,
Kharis


#10

Hello,

I have the same problem but with the sticky menu (I do not want it fixed). The menu is covering the content only in Safari and when the windows is smaller than 1024.

Is there a css code I can use to keep the content below the header but make it covered when scrolled down?

Thank you,

Claudia


#11

Hello Kahris! Sorry for a late reply, I tried inserting that code in to my custom CSS, under appearance, but nothing changed. I also tried replacing it with the previous code that you provided in the firsts posts here, but no change.

I also want to add that my display settings are set to the equivalent to 1680x1050 in my macbook pro (retina) i.e. it is set to be scaled between default and more space.


#12

Hello Claudia,

Please try adding the custom CSS code below:


.site-header.fixed{
  position: fixed !important;
}

@media only screen and (max-width:1024px){
  
  .site-header:not(.fixed){
    position: relative !important;
  }
  
}

Regards,
Kharis


#13

Great, it works perfectly!
Thank you :wink:


#14

Hello @reditz,

For efficiency reason, I’d like to resolve this issue directly from your site admin area. Would you mind sharing me the working login credentials with admin rights to my email kharisblank@gmail.com?

Regards,
Kharis


#15

Hello Kharis!
Please, I have the same problem. Since I updated the Sydney theme my menu on safari and internet explorer covers part of my first headline. It looks great on chrome, but the other browsers are not respecting it.
I tried the first code:

    body:not(.home) #masthead.site-header{
      position: relative !important;
    }

works great but it creates a blank space over the menu and I am not able to get read of it. So, I delete the code and now I do not know what to do.
here is my url: bestmarijuanainsurance.com
Thank you very much for your support!!!

I have observed that when I resized the window it adjust well, please what should I do?


#16

Hello there,

Please check your web browser versions. And ensure they’re the latest. Probably older ones can’t recognize :not selector.

https://www.w3schools.com/cssref/sel_not.asp

Regards,
Kharis


#17

Thank you for the response!
I tried to update but nothing change. Please would be there some way that I go back to the older version before update? Because I am thinking that not all the people has the last update versions and then the page look broken.

Please review this page

I see that this does not happen in all browsers but I wonder how can I make it work so on all browsers are looking good. Please help! Thank you!!