This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Transparent Menu Bar – Background Body visible (Vantage)

Open 9 replies premiumthemetheme-vantage
Ludger Frings
11 years ago · Last reply by AS Cahyono 11 years ago

Hey Hugo,

is it possible to change the Opacity from body at Menu Bar Navigation to let the background image shining through?

Already tried:


zoom: 1;

filter: alpha(opacity=50);

opacity: 0.5;

But I’m also wanting the wrapper transparent displayed ;)

Best regards,
Ludger

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 11 years, 6 months ago

    Hi Ludger

    To set opacity on the menu you could try:

    /* Vantage Navigation Opacity */

.main-navigation {
  background: rgba(52, 53, 56, 0.5); 
}

    Then for the header, body and footer, in order:

    /* Vantage Full Width Set Page Opacity */

header#masthead {
background: rgba(255, 255, 255, 0.5) !important; 
}

#main {
background: rgba(255, 255, 255, 0.5) !important; 
}

#colophon {
background: rgba(255, 255, 255, 0.5) !important; 
}

    Just delete the selectors you don’t need. 255, 255, 255 needs to be changed to your color. All CSS to be inserted under Appearance > Custom CSS.

  2. AS Cahyono 11 years, 5 months ago

    it is not working for me
    any suggestion Andrew ?
    http:/www.dutaflow.co.id

    • Andrew Misplon Staff 11 years, 5 months ago

      Hi Mr Cahyono

      Which elements of your site would you like at adjust the opacity on?

  3. AS Cahyono 11 years, 5 months ago

    Hi Andrew
    just when menu background stay on top (transparent)
    not when it’s scrolling. (when its scrolling not transparent)
    hope that you understand for what I mean.
    sorry for my english.

    kind regards
    cahy

  4. AS Cahyono 11 years, 5 months ago

    FYI, style I used is logo on menu bar, boxed layout.

  5. Andrew Misplon Staff 11 years, 5 months ago

    Right now you have:

    .main-navigation {
background: rgba(153, 116, 46, 0.5);
}

    That applies to the menu both at it’s top position AND the menu once it starts to scroll. If you want to apply the opacity to only the scrolling menu use:

    .main-navigation.sticky {
background: rgba(153, 116, 46, 0.5);
}

    Or the other way around. If you only want opacity when at the top but not when sticky then you would say:

    .main-navigation {
background: rgba(153, 116, 46, 0.5); 
}
.main-navigation.sticky {
background: rgba(153, 116, 46, 1); 
}

    Once you scroll a new menu is used with the class .sticky.

    Hope this makes sense.

  6. AS Cahyono 11 years, 5 months ago

    Superb assistance
    thanks Andrew.
    But actually I’m eager to see main navigation is no background it’s self.
    I mean is it possible to remove main navigation background on style.css, when it stay on top
    I’d like to see metaslider (slideshow or big image) as shown as header, where there are logo and menu (main navigation) above it.
    and I want to website background as same as main nav (menu) background.
    But when it’s scrolling (sticky), there’s color on main nav. background.
    it would be nice
    thanks again.

    kind regards.
    cahy

  7. Andrew Misplon Staff 11 years, 5 months ago

    No problem. Can you please open a new support thread for me and I’ll do my best to assist there.

    Thanks.

  8. AS Cahyono 11 years, 5 months ago

    please check this link :
    https://siteorigin.com/thread/is-it-possible-making-no-main-nav-background-default-on-style-css/
    I’ve made a new thread.
    thanks

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread