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.