[Resolved] Transparent header using GeneratePress and Beaver Builder

Home Forums Support [Resolved] Transparent header using GeneratePress and Beaver Builder

Home Forums Support Transparent header using GeneratePress and Beaver Builder

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #224478
    Tony

    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

    #224528
    Tom
    Lead Developer
    Lead Developer
    #224631
    Tony

    Hi 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

    #224632
    Tony

    I’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

    #224696
    Tom
    Lead Developer
    Lead Developer

    Hi Tony,

    Typically for this kind of layout you want your navigation floating right (Customize > Layout > Primary Navigation > Navigation Position).

    #224699
    Tony

    Hi 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

    #224700
    Tom
    Lead Developer
    Lead Developer

    Can you link me to that page?

    #224703
    Tony
    #224704
    Tom
    Lead Developer
    Lead Developer

    Try adding the CSS using a plugin like this: https://wordpress.org/plugins/simple-css/

    #224710
    Tony

    Thanks 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;
    }

    #224713
    Tom
    Lead Developer
    Lead Developer

    You’re missing the period before site-header.

    It should be: .site-header

    #224715
    Tony

    Sorry, that was a typo cut and paste in this thread, the period is in the Simple CSS box.

    Regards,

    Tony

    #224717
    Tom
    Lead Developer
    Lead Developer

    I 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;
    }
    #224728
    Tony

    Thanks Tom, I’ll try it when I get back tonight.

    Regards,

    Tony

    #224729
    Tony

    Couldn’t resist, I remoted in and it worked!! Thank you so much!

    Regards,

    Tony

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