Archived topic
Need help with Transparent Menu with Beaver Builder
11 replies · Started by Edward on July 5, 2016
Hi i am working on doing the Transparent menu on a test site i am playing with to get use to using the theme so i can do this on other sites i use it on..
I used the home page settings set t0 transparent and i do have this working on the home page here using Beaver Builder and a slideshow pulling images in from Smugmug.
http://chicagoweddingaccessories.com/
I am trying to do the same for other pages but using a single top image pulled in from Smugmug.
I have it working by adding css into BB for that page but i am having a problem with a white top area i can not get rid of.
Using this code
.smug-bg-image2 {
background-image : url(https://photos.smugmug.com/Modeling-Photography/Sweetie-Ainscough/i-w2GWRKv/0/O/Morgan-Media-6227.jpg);
background-repeat: no-repeat;
background-size: cover;
}
This seems to be a area in that it seem i much put something into in the page admin content settings area to be able to see and use the advanced settings for that page.
How can i get rid of the top white are on this page i think it might not show if i was able to just set the advanced settings for that page with out adding something into the content settings area. I only have a . put in just to be able to access the advanced settings.
also for a adding a top image to make all this more easy it would be great if you could add in a area in the page so i can just add in the web link to the image as a option i want to use then i would not need to use the css to bring in a outside image making this more easy
http://chicagoweddingaccessories.com/sample-page/
Also can you please add in a CSS area in the customizer that will let me add in css that covers all pages globaly as well.or is their a place to do that?. Thanks
If you remove padding for this element you can see there is the default blurb behind your picture, I would suggest cleaning all this up before having anther look at what the problem is.....
See the screenshot with padding removed from this element:
https://drive.google.com/file/d/0B6okVQYROvOPUXd2dXRKZG5qOUE/view?usp=drivesdk
Perhaps I can look again once you have cleaned up the page....
Regards....
Ignore that last comment in my haste I missed the problem, If you look at the screen shot below you will see I have a pointed an arrow to a small dot, this is a . in font size 17px that is causing the problem, remove that "white dot" (black while highlighted....) and you should be ok...
https://drive.google.com/file/d/0B6okVQYROvOPRFA3eEFYcjYyeWc/view?usp=drivesdk
Regards,
Adam
It looks like you got this figured out? :)
I am new to generate press and using Beaver Builder. Is there a way I can make the header transparent with the Beaver Builder row behind the menu. I am a gp premium user, but I don't want to use the header add on when I already have beaver builder to handle it. How can I accomplish this?
Hi there,
This depends, your navigation would have to be inside the header, and your header would have to be absolutely positioned.
Can you link me to an example page?
Sure. I am working on it right now at demo2.creativeministrydesign.com.
So you would want to add this CSS only in pages where you want it to happen. Our Simple CSS plugin adds a metabox to your pages so you can do this.
.site-header {
position: absolute;
width: 100%;
left: 0;
z-index: 500;
}
#site-navigation,
#site-navigation .main-nav li a {
background: transparent;
}Let me know :)
So it's on a page by page basis? No way to do it site wide?
By chance do you guys also have a child theme?
You can do it site-wide, but if you have a page that doesn't have a header like your Beaver Builder pages, it won't look very good.
For site-wide CSS, add it to "Appearance > Simple CSS".
For sure, here's our blank child theme: http://generatepress.com/api/themes/generatepress_child.zip
Hi Tom,
How do I make the header transparent for mobile as well?
Currently, the header and navigation area is transparent on bigger screens using this code:
.site-header {
position: absolute;
width: 100%;
left: 0;
z-index: 500;
}
#site-navigation,
#site-navigation .main-nav li a {
background: transparent;
}
Nevertheless, when on mobile the header is white and above the hero image. What I am looking for, is a way of having the Hamburger Icon (navigation area) be transparent as well!
Any suggestions on how to make this work?
Thanks
Hi there,
can you raise a new topic where you can share a link to your site in the Private Information.
