- This topic has 15 replies, 2 voices, and was last updated 7 years, 6 months ago by Tom.
-
AuthorPosts
-
September 6, 2016 at 4:40 pm #224478Tony
Hi Tom,
I’d like to create a transparent header menu like the one created here:
http://beyondbeaver.com/create-a-beaver-builder-transparent-header/
but this one is for the Beaver Builder theme. How can I create the same effect using GeneratePress with Beaver Builder?
Thanks,
Tony
September 6, 2016 at 8:04 pm #224528TomLead DeveloperLead DeveloperHi Tony,
This topic might help: https://generatepress.com/forums/topic/need-help-with-transparent-menu-with-beaver-builder/
Let me know 🙂
September 7, 2016 at 4:53 am #224631TonyHi Tom,
Yes, I did read and try the info on that page before writing but the code that you suggest only changes the navigation bar to a white bar (or makes it invisible). I suspect that it might be because I have the navigation bar set to “Above Header” and I don’t know how to put it inside the header.
regards,
Tony
September 7, 2016 at 4:56 am #224632TonyI’m guessing it might be through the inside header GP Hook, but I don’t know what to put there to make the navigation bar appear there. I tried using the header widget and putting my main menu there as a custom menu but it just created another header-sized space with nothing in it.
Regards,
Tony
September 7, 2016 at 9:42 am #224696TomLead DeveloperLead DeveloperHi Tony,
Typically for this kind of layout you want your navigation floating right (Customize > Layout > Primary Navigation > Navigation Position).
September 7, 2016 at 9:48 am #224699TonyHi Tom,
Thanks. I just tried that and it moved my previously centered menu items to the right (the text is white but I can just see them to see that they are there and transparent). The problem is that the main hero image that they are supposed to be over won’t go behind them but remains just below, no matter the margin settings being at zero.
It’s so close to working, I’m sure it’s just some other setting that I’ve (mis)used.
You can see it at my test site: http://trmainshell.com/
Regards,
Tony
September 7, 2016 at 9:49 am #224700TomLead DeveloperLead DeveloperCan you link me to that page?
September 7, 2016 at 9:52 am #224703TonyHere you go: http://trmainshell.com/
September 7, 2016 at 9:53 am #224704TomLead DeveloperLead DeveloperTry adding the CSS using a plugin like this: https://wordpress.org/plugins/simple-css/
September 7, 2016 at 9:59 am #224710TonyThanks Tom, no difference.
The code I’m using is:
site-header {
position: absolute;
width: 100%;
left: 0;
z-index: 500;
}#site-navigation,
#site-navigation .main-nav li a {
background: transparent;
}September 7, 2016 at 10:17 am #224713TomLead DeveloperLead DeveloperYou’re missing the period before site-header.
It should be:
.site-header
September 7, 2016 at 10:22 am #224715TonySorry, that was a typo cut and paste in this thread, the period is in the Simple CSS box.
Regards,
Tony
September 7, 2016 at 10:30 am #224717TomLead DeveloperLead DeveloperI actually checked the source of your site – didn’t notice it missing in the CSS above.
You want to add one more part:
.fl-builder .site-header { position: absolute; width: 100%; left: 0; z-index: 500; background: transparent; } .fl-builder #site-navigation, .fl-builder #site-navigation .main-nav li a { background: transparent; }
September 7, 2016 at 10:42 am #224728TonyThanks Tom, I’ll try it when I get back tonight.
Regards,
Tony
September 7, 2016 at 10:44 am #224729TonyCouldn’t resist, I remoted in and it worked!! Thank you so much!
Regards,
Tony
-
AuthorPosts
- You must be logged in to reply to this topic.