opacity header

edited October 2018 in Theme support
Hello,

I need some assistance to change the opacity of the header (stack center).  I want to change this header to semi transparent.
Is it possible to change this with css code because I tried 

#Top_bar{

               
background-color:rgba(0,0,0,0.8) !important;

}


but that didn't work.


Best regards,
Sven.

Comments

  • Hi,
    This menu type is not very friendly for additional backgrounds.
    It will look like this:
    http://prntscr.com/l6zs2t
    And even if I'll apply the background for the menu items, I wouldn't be able to remove these blank strips at left and right because javascript script will change the width of this menu and Custom CSS will be issued.

    Are these left and right blank strips ok for you?
    Cheers
  • Hi,

    I can change from menu type, that is not the problem. The thing is I want something to achieve like the website www.bij-jans.nl

    This means a picture in the background and a menu that is semi transparent.


    Best regards,

    Sven.


  • The best for you will be a "Split Menu Semitransparent."
    You won't have to change anything in CSS to make your menu semitransparent.

    If you don't like this type of menu, change it to the one you like and
    tell me, and I'll try to make a CSS for you.
    Thanks.
  • Hi,

    i have tried "split menu semitransparent" but I don't like the split. Is it possible to do this with the current type of menu (stack center)?


    Best regards,

    Sven.

  • As I said, it's possible, but only with strips on left and right.


    .menu_wrapper{
    background:rgba(0,0,0,.2);
    }

    .menu_wrapper .menu li{
    background:rgba(0,0,0,.2);
    }
    Paste it to Theme Options > Custom CSS & JS > CSS


    Thanks
  • Hello,

    I followed your advice and I have used the option "split menu transparent". On desktop everything is looking ok but on a mobile phone there is a white space just underneath the banner. Is it possible to remove this white space?

    Best regards,

    Sven.

     


  • It's a subheader.
    You can disable it in Theme Options > Header & Subheader > Subheader
    and tick the "hide" to "subheader"
    Thanks
  • Hello,

    indeed there is a subheader and on desktop this subheader is transparent.

    Can this also be the case on mobile? If not is there a possibility to hode this subheader but only on mobile?

    Thanks.



  • This CSS will hide subheader only on mobile:
    @media (max-width:787px){
    #Subheader{
    display:none !important;
    }
    }
    Thanks
  • edited December 2018

    Hello,

    I still have a problem with the combination logo and the selected menu.

    On desktop everything is fine, there is a white semi transparent menu with in the middle the logo.

    On mobile there is another mobile menu (this is logic because of the width) but because of that there is no white background anymore. So the visibility of the logo isn't very good.

    So My question is: is there a possibility to add a semi transparent banner behind the logo on a mobile device?


    Best regards.



  • Please use this CSS:
    @media (max-width:767px){
    .header-split #Header .top_bar_left, .header-split #Header .top_bar_right{
    background-color:rgba(255,255,255,0.8) !important;
    padding-top:35px !important;
    }
    }
    Thanks
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.