I have a problem with the mobile version of my website. I have used the following CSS (found in one of the support threads) to make my main menu transparent and to have it on top of the Metaslider. When browsing the site on a desktop, everything looks like it should and I’m a happy camper.
/* transparent main manu */
.main-navigation {
background-color: transparent !important;
z-index: 99;
box-shadow: none !important;
}
#masthead {
height: 0px;
}
#search-icon #search-icon-icon {
background-color: transparent !important;
}
.main-navigation ul ul {
background-color: transparent !important;
}However, if I view the website on a mobile phone (portrait or landscape) or a tablet (in portrait), it displays an unneccesary header/menu background above the Metaslider, creating extra padding above the image which I don’t want to have (ruins the feng shui of my site, you know?). The transparent menu itself is functioning correctly on top of the slider image.
Would it be possible to create custom CSS in order to hide that extra padding on the mobile version as well? I have tried enabling/disabling the mobile only options in the theme settings, but I haven’t managed to find the correct option, if my theme settings even are the problem. My layout is full width, masthead menu and layout is on default, I have responsive menu enabled and heading padding is set to 0px in the customize menu. My mobile menu collapse is set to 680, but it doesn’t seem to do anything to my menus on mobile (they use the collapsed menu regardless of what I set it to).
Any help would be appreciated, thanks!
Hi AbbieG
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
This is a private message.
Done and done.
Thanks :) Try taking a look now. Does that work for you?
Nice! The extra header is gone. However, it seems my name has now appeared to the far left corner of the menu, which I don’t want to have there. I assume that is also why the rest of the menu is now off-centered. If you could fix that then it looks like I want it :)
Nevermind. I changed the masthead layout to default masthead and it fixed the problem. Thanks! The feng shui has been restored! Would you mind sharing what the problem was? So that case it happens again I’ll know how to fix it.
Sure; in Custom CSS menu height was set to zero, that was causing problems on mobile :)
All the best.