Home Forums Weaver Xtreme Theme Make Menu Bar Transparent

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #64500
    ldekay
    Participant

    I purchased Plus so I could do a parallax front page with the menu bar overlain with a transparent background. I tried inserting transparent in background colors for the menubar, header, wrapping areas, wrapper, content AND info bar after finding one related topic, but that hasn’t worked. The white menu bar background still obscures the top of the parallax image on the front page.

    The Weaver article on parallax also highlighted css code to make the text for the parallax post be semi-transparent white characters with a shadow to help readability. I added that code to the Per Post Style sheet but it has no effect. Ideally the text would have a transparent background as it rolled over the underlying parallax image.

    How can the transparent background be achieved? And what do I need to do to get the text to be semi-transparent white characters with a shadow to help readability?

    Website: http://newcgaca.gorgeculture.org/

    #64502
    scrambler
    Moderator

    This has nothing to do with the background being transparent (they are), but the fact that the parallax image is in the content area which is below the header area where the menu bar is.

    If you want the menu bar above a parallax background, Use the header image for that, The header image can be set as a parallax background, then you will also need to set the “minimum header height” to make sure enough of the image is visible.

    If you want the menu bar text to be semi transparent with shadow, we can do that, but right now you have set a background color for the menu item, so that would only make them semi transparent over a flat background color. SO you need to clarify if you want the menu item background to be semi transparent, or no item background and a semi transparent text.

    If the later, you need to set the Item BG to transparent, and add the rbga value below to the menu bar text color box
    rgba(255,255,255,0.8)

    And add the CSS to the menu bar text color CSS+ box
    {text-shadow: 3px 3px 8px rgba(150, 150, 150, 0.5);}

    #64511
    ldekay
    Participant

    I changed the menu to stay fixed to top on scroll and made the background transparent for the individual menu items. Now when I scroll down the opaque area behind the menu bar scrolls away revealing the top of the parallax image with the menu overlying it. So what I’m trying to make transparent is that bit of opaque area that scrolls away. Any guidance as to what that bit of area is and how I can make it transparent?

    http://newcgaca.gorgeculture.org/

    #64512
    ldekay
    Participant

    Is the header area of this forum page what you’re suggesting about making a parallax header? If so, how is that done?

    Or is that a background image that the page scrolls over?

    #64513
    scrambler
    Moderator

    You are not listening…

    Your image is in the content area, so there will always be an empty space above it where the header and the menu bar is. You can make that area transparent all you want, the image in the content area will never show in there.

    The best way to do what you want is to follow the recommendation I gave you, does the solution I gave you not work for some reason??

    #64514
    scrambler
    Moderator

    If for some reason you do not want to use the proper method I gave you above, you could collapse the header by adding the rules below to the theme Global custom CSS rule box
    .menu-primary {position:absolute;width:100vw;}

    #64515
    scrambler
    Moderator

    If for some reason you do not want to use the proper method I gave you above, you could collapse the header by adding the rules below to the theme Global custom CSS rule box
    .menu-primary {position:absolute;width:100vw;}

    But on pages where that image is not there it may give you the wrong results, If so, you could add the page class to it to only do it on that page

    .home .menu-primary {position:absolute;width:100vw;}

    #64524
    ldekay
    Participant

    Sorry, I didn’t mean to offend. Parallax and sliders are new territory for me and I can be pretty uber-focused on what I had already done. Also didn’t know how to set up a parallax header, but at your ‘urging’ I poked around and found the keys to do the parallax header (they were hidden in plain sight).

    There is still a problem that I can’t figure out. I’ve tried to Right align the menu using both the Customizer and the WeaverX Admin interface. It automatically reverts to Center, regardless of whether I turn on or off the Add Search to Right option. Is this a bug or do I have something else set that is overriding this control? http://newcgaca.gorgeculture.org/

    Thanks for your help and your patience.

    #64525
    scrambler
    Moderator

    I think I remember someone having the alignment issue, and it was because of the “One step layout” option found in Main options > Full Width.

    Go there and and make sure the One step layout is either blank or on “traditional”

     

    #64528
    ldekay
    Participant

    Yep, I had the One Step Layout set to Stretched. Changed it to Full Width and the Align Right sticks now.

    Thanks.

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