Menu Bar is overlay by the slider

my website: www.theideashark.com

Hi,

in mobile view, the menu dropdown is overlay by the body slider.

secondly, how can i make my logo and the menu bar in line? as now the menu is a bit below of the logo.

please advice any custom css code to edit it?

Thank you

Bryan chin

Hi,

You can fix the menu overlay with this Custom CSS:

.header-slider {
    z-index: -1 !important;
}

and you can center the menu with the logo on mobile with this Custom CSS:

@media only screen and (max-width: 480px) {
.site-logo {
    max-width: 260px !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

Thanks Csaba! both issues were fix! Your help is much appreciated!

Hi,

Just found that it only fix for front page. other menu page is broken in mobile view & tablet view.

  1. menu bar still overlay by the slider
  2. Logo and header images unable to changed.
  3. footer not changed. “proudly powered by wordpress…”

Please help. Thank you

bryan chin

Hi,

i have solved the NO 2 and no 3 items.

The only issue is menu bar still overlay by the slider in other pages other than front page in mobile view.

www.theideashark.com

Please help.

thank you

bryan chin

Hi,

This Custom CSS should fix the menu overlay issue on all pages:

.header-slider {
z-index: -1 !important;
}

Please make sure to add this CSS to the first line in your Custom CSS field.

Best Regards,
Csaba

Hi,

I have followed your instruction but only the front page is not overlay but the call to action button is not working. other pages is still overlay with the header images. this issue only happen in mobile view.

www.theideashark.com

can you take a look and give some advice.

Thank you

Bryan Chin

Hi,

Please post a link to the page where the menu is behind the header, so I can check.

Best Regards,
Csaba

Hi,

I am having the same issues as Bryan. The menu overlay issue on the slider can be fixed with the above code but the slider call to action buttons do not work. The menu bar overlay is also present on the other pages in mobile view.

The mobile version of http://www.theideashark.com looks good. The menu works and the buttons on the front slider also works.

Can you please advise on how to fix this issue?

Thank you.

Hi @qwertyasd321,

Please post a link to your website, to the page where it doesn’t work, so I can check.

Best Regards,
Csaba