Home>Support>Transparent Menu Bar
  1. 7 years, 1 day ago Andrew Misplon Hi, I Work Here

    Hi Marcus

    Apologies for the delay.

    Please, try adding the following to Appearance > Custom CSS:

    /* Main Menu */
    #masthead .main-navigation {
        background: rgba(52, 53, 56, 0.8);

    The first three values are the color in RGB, the last value is the opacity (A) making up RGBA.

    Adjust as required. The current RGB values are the same as the original hex color which is: #343538.

  2. 5 years, 9 months ago Simo

    Hi Andy,
    I am using the free vantage theme.

    I am trying to make the menu bar fully transparent when at top or when scrolling. On another of your links you suggested:
    /* this is to make menu transparent*/
    .main-navigation ul ul,
    .main-navigation ul li a,
    .main-navigation ul li:hover >a {
    background-color: rgba(0,0,0,0.1) !important;
    box-shadow: none !important;
    I changed the rgba settings as I don’t want a color.

    the issue I am getting is that when the page is at the top it is a non-transparent grey color but when scrolling it is a transparent grey color? I want the background image to show through.

    I tried to use the Custom css to see if there is a color set but when I use the “eye” view to select and try and change a background color the relevant field will not accept an input BUT when go back to the editor view it has put code in???

    Sorry to give you two questions but they seem linked…

    Many thanks in advance


    • 5 years, 9 months ago Andrew Misplon Hi, I Work Here

      Hi Simo

      Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More