Hello SiteOrigin Support Theme,
Again we can´t stop saying: thanks for the ·G R E A T E S T · T H E M E · O N · W O R D P R E S S· It has enabled us to do amazing websites that follow the latest web design trends, all while keeping it fully responsive and compatible, without going through the hassle of coding it all. We can´t even believe how great it is, it seems unreal.
Anyways, we are trying to achieve a menu effect like the one you have in your homepage: Transparent menu, you can see the image behind it.
We found a previous thread with a code that accomplished it but it seems it is causing the menu icon to disappear in the mobile version.
Here is the code:
/* Vantage Logo in Menu Transparent Menu BG */
nav:first-of-type { display: none; }
.main-navigation.sticky[style] { width: 100% !important; }
.main-navigation {
background: rgba(52, 53, 56, 0.5);
box-shadow: none !important;
}
/* Vantage menu opacity */
.main-navigation {
zoom: 0;
filter: alpha(opacity=87);
opacity: 0.87;
}
We think the first line is causing the problem (the one that makes the white bg disappear)
Is there any way around it?
Thanks again,
J.
URL: http://rabita.mx/
Hi Jose
Thanks so much for your support, it’s much appreciated. I’m seeing your menu icon in OS X Chrome and Firefox and on iOS Chrome. Can you perhaps let me know what you’re testing on and I’ll take another look.
Hello Andrew,
thanks for the quick response. Im using Chrome on Android Phone, Chrome on Ipad and Safari on Ipad. Here are the screenshots.
Android Phone (Chrome):
http://rabita.mx/wp-content/uploads/2015/02/Screenshot_2015-02-11-22-14-32.png
http://rabita.mx/wp-content/uploads/2015/02/Screenshot_2015-02-11-22-15-54-1.png
http://rabita.mx/wp-content/uploads/2015/02/Screenshot_2015-02-11-22-14-46-1.png
Ipad Air (Safari):
http://rabita.mx/wp-content/uploads/2015/02/Photo-11-02-15-22-31-41.png
http://rabita.mx/wp-content/uploads/2015/02/Photo-11-02-15-22-31-23.png
Ipad (Chrome):
http://rabita.mx/wp-content/uploads/2015/02/Photo-11-02-15-22-19-45.png
http://rabita.mx/wp-content/uploads/2015/02/Photo-11-02-15-22-19-34.png
Hope you can help!
J.
Thanks, with you now. Is there any chance that the menu or other theme files have been edited in this installation? When the sticky menu is activated Vantage creates a duplicate menu that gets used for scrolling. That’s the reason we’re hiding the first menu with CSS, the duplicate menu method doesn’t work with opacity turned on.
Hey Andrew,
as far as I know only with the custom CSS option. Thats all the editing.
We just pushed a Vantage update. So one option here is just to run that update. It’ll overwrite all theme files and confirm for us that nothing is missing.
If you’re only 99% sure that theme files haven’t been changed you could perhaps login to your server via FTP or hosting file manager and make a backup of the vantage folder at /wp-content/themes/
Hey andrew!
Just updated the theme, still having same problem. :(
Any other solution? Maybe a plugin that shows a mobile menu icon or something.
thanks
J
Thanks for giving that a try :)
Sorry for repeating myself but please can you confirm that Appearance > Theme Settings > Navigation > Sticky Menu is active. If that setting is not active then you must remove:
nav:first-of-type { display: none; }Hey Andrew,
Sticky Menu is Active
any other ideas?
Does the sticky menu work if you temporarily remove Custom CSS?
Andrew,
all the custom css has been removed, check out the site!
Sticky is working in desktop but we still don´t see menu on mobile.
J.
Thanks. Sticky is de-activated on mobile by default, you can re-activate it from Appearance > Theme Settings > Navigation > Mobile Navigation.
Please can you clear your caching plugin’s cache. I’m unable to see the changes on my side. Thanks.
Sticky menu activated on mobile navigation – √
Cache Deleted – √
now I can see the menu on mobile . But what about the custom CSS.
we would like to have the menu/site work as your Home Page ( https://www.siteorigin.com )
Transparent menu, you can see the slider image in the back, Full width, etc.
Thanks, you are great!
J.
Sorry, I still seem to be getting the cached version. Any chance you could send me a set of temporary login details? This can now be done via the forum. If you check the left sidebar there is a private email address, can you perhaps send me some login details using that. It’ll still be on our thread but only visible to us.
Andrew,
I am not able to find the email adress, could you explain further or maybe just send me an email.
Thanks
J
Sorry, brand new feature, I haven’t used it yet. Could you try mailing me on [email protected] with those details. Thanks. Would be great to test this new forum feature out. Thanks.
This is a private message.
This is a private message.
Thanks. Please check now. There was a caching problem.
Hello Andrew,
still having trouble with the menu on different devices, also sometimes it disappears in some pages when in desktop.
any idea how to fix it permanently?
thanks again,
J
Try clearing the cache of your caching plugin and then de-activating it for a while.
Hey Andrew,
cleared cache and erased the plugin,
hope it works!
Thanks,
J
Still not working, any other ideas?
J
All seems well on my side in all browsers. Are you still seeing the problem occur? Can you perhaps clear your local browser cache and re-test?
Fixed! Thanks,
any recommendations of a good cache plugin,
J.
Awesome.
I’m using this on some sites. It doesn’t work on WordPress multi-site but I like how it’s super simple in comparison to the others. Perhaps try it out:
https://wordpress.org/plugins/wp-fastest-cache/
Hey Andrew, back on the thread.
I did the following: erased cache plugin, and removed all the custom CSS. After that I went to theme settings, checked all the sticky boxes and started writing all the CSS again, line by line and testing it.
Everything was fine until I got to this particular line of code:
/* Vantage Logo in Menu Transparent Menu BG */ nav:first-of-type { display: none;}That particular line of code causes the menu to disappear when in mobile; but I also found that while on mobile with no custom CSS but the sticky menu boxes activated; the sticky menu did not work. It did not stay on top of the screen. I have the same issue with this other site: http://www.servicioswebmex.com
This issue came with the last theme update, previously it worked like magic.
I need some support as soon as possible,
Thanks again.
J.
Hi Jose
If everything is working without that CSS rule then that’s great. All looks good on my side. Hopefully I’m understanding you there.
You can get the sticky menu working on mobile by heading to Appearance > Theme Settings > Navigation and activating the “Mobile Navigation” setting. That’s a new setting.
Hey Andrew,
the sticky menu is on but is no working on mobile. (all the sticky menu options are checked)
I deleted that last line of code under the custom CSS.
If I add it again it will make the menu disappear on mobiles. Basically it is the same issue from the beginning: I am trying to make the menu look like the one in https://www.siteorigin.com and that option of code (display:none) is causing the menu to disappear in mobile.
I think it is an issue with the sticky menu not working on mobile, even when the box is checked and the custom css code is removed.
Hope I am clear,
thanks again!
J
This bit of CSS:
nav:first-of-type { display: none;}That makes your menu transparent right from the beginning. Without it your menu is only transparent after it moves off it’s original position. This is because the Vantage sticky menu works by duplicating itself. So at position one, the start, there are actually two menus there, one on top of each other.
I’m checking mobile now.
Sticky menu isn’t working on mobile even with all plugins de-activated. At this point I’d consider leaving this with no sticky on mobile. We originally had that de-activated by default for mobile as it’s not really considered best practice. In these recent updates we introduce the Mobile Navigation setting to allow users to re-active it on mobile. That’s not working for you. If you’d like to figure out why, please can you try testing with all plugins de-activated. Please remember to clear the cache of your caching plugin before de-activating it. There is a chance that a plugin conflict is stopping the sticky menu working on mobile.