Need help with Transparent Menu with Beaver Builder

[Edward]

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

[Adam]

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….

[Adam]

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

[Tom]

It looks like you got this figured out? 🙂

[Andrew]

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?

[Tom]

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?

[Andrew]

Sure. I am working on it right now at demo2.creativeministrydesign.com.

[Tom]

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 🙂

[Andrew]

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?

[Tom]

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

[alberto-salas]

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

[David]

Hi there,

can you raise a new topic where you can share a link to your site in the Private Information.

[Author]

Posts