Navigation bar overlapping

My header seems to be overlapping my content on the home page when the window is full screen, but then stops overlapping when minimized or viewed on mobile devices. Is there any way to make it permanently not overlapping?

http://centralparkbistro.siphonsites.com/

Thanks!

Hi,

You can add more padding on bottom of the menu to don’t cover the image with this Custom CSS:

@media only screen and (max-width: 1200px) {
#pg-2-0 .panel-row-style {
    padding-bottom: 15% !important;
}
}

@media only screen and (max-width: 768px) {
#pg-2-0 .panel-row-style {
    padding-bottom: 10% !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

I added the code into my custom css, but it didn’t seem to work.

Here’s another page on my website that shows the problem more clearly.

http://centralparkbistro.siphonsites.com/private-dining-events/

Thanks!

Hi,

The issue is because you’ve set the fixed header to absolute position, please use relative instead, so it won’t cover the content from below it, with this Custom CSS:

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

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

Please let me know how it works.

Best Regards,
Csaba

That did the trick,

Thanks for the help!

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba