Hi,
I’m having problems with my transparent menu. I can see it on my desktop, but not on mobile devices. I’m not sure how to fix this. Any help would be appreciated.
Also, I would prefer to have the sticky menu deactivated. However, when I do this the menu just disappears off all devices. I have enclosed all the code I have inserted into the custom CSS. I also have one or two child themes activated. If it would be more helpful, I can provide a temporary login for the back end of the site.
Thanks,
Jeff
/* Remove Logo in Menu img constraint */
header#masthead.masthead-logo-in-menu .logo > img {
max-height: none !important;
}
/* Move logo in menu */
body.responsive header#masthead.masthead-logo-in-menu .logo {
margin-left: 5px !important;
}
header#masthead.masthead-logo-in-menu .logo {
padding: 5px 5px !important;
}
/* Logo in Menu Transparent Menu BG */
nav:first-of-type { display: none; }
.main-navigation.sticky[style] { width: 100% !important;
background: rgba(0, 0, 0, 0.4);
box-shadow: none !important;
}
/* Menu hover transparency */
.main-navigation ul li:hover > a, #search-icon #search-icon-icon:hover {
background: rgba(0, 0, 0, 0.0) !important;
}
/* Menu vertical spacing and text spacing */
.main-navigation ul li a {
padding: 55px 15px;
}
/* Right align the main menu */
.main-navigation ul {
text-align: right;
}
.main-navigation ul li {
display: inline-block;
float: none;
}
/* Set menu font family and size */
.main-navigation a {
font-size: 16px !important;
}
Hi Jeff Wright
First of all I apologize for the delayed response
You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
nav.site-navigation.main-navigation.primary.use-sticky-menu.sticky { filter: alpha(opacity=50); opacity: 0.5; }Try that out and let me know if this works for you
Thanks for your help! I entered the code and it didn't work. It created a second (transparent) menu that functions like the sticky menu when scrolling, but the original (black opaque) menu stays in place at the top of the page at the same time. The effect I'm looking to replicate is similar to Site Origin's transparent menu, if that helps.
For now, I have removed all the css code pertaining to menu transparency and have the menu background set as opaque black. This seems to work across all devices. If you have any other code suggestions, I would love to hear them.
Hey Jeff
Please try removing any Custom CSS that pertains to this section and then try the following:
/* Vantage Logo in Menu Transparent Menu BG */ .main-navigation.sticky[style] { width: 100% !important; } nav:first-of-type { display: none; } .main-navigation { background: rgba(255, 255, 255, 0.7) !important; }This assumes Logo In Menu masthead layout and sticky, both ON.
Let us know how that goes.
255, 255, 255 is the RGB color and 0.7 is the opacity. I didn’t tweak that for your site, please adjust if you have a moment. Thanks.
Hi Andrew,
That definitely is the look I'm going for, but the menu still disappears on mobile devices (I'm viewing with iphone and ipad). If you have any other suggestions, please let me know. Otherwise, I'll just leave the menu opaque as that seems to work across all devices. Thanks for your efforts!
Mmm, ok, I think what I’ve provided will only work if you have Appearance > Theme Settings > Navigation > Mobile Navigation activated. Perhaps try activating that setting and re-check. Thanks.
I went ahead and tried that Andrew, and nothing:( This problem seems to be a tricky! Let me know if you have any other thoughts. Thanks!
Please could you send through a set of temporary login details to:
[email protected]
I’ll jump in ASAP.
Thanks
This is a private message.
Ok, bleak, those didn’t seem to come through. I just got the first part of the message. Sorry about this. Let’s go old school, please email me on [email protected] and I’ll pick them up there. Apologies for the hassle. I’ll get you sorted ASAP.