Black Friday Sale! Get up to $40 off GP Premium!Learn more

Need help with Transparent Menu with Beaver Builder

Home Forums Support Need help with Transparent Menu with Beaver Builder

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #206725
    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

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

    #206766
    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

    #206872
    Tom
    Lead Developer
    Lead Developer

    It looks like you got this figured out? 🙂

    #213436
    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?

    #213470
    Tom
    Lead Developer
    Lead Developer

    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?

    #213526
    Andrew

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

    #213602
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #213624
    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?

    #213668
    Tom
    Lead Developer
    Lead Developer

    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.