Home>Support>Header transparent, sticky won’t work

Header transparent, sticky won’t work

By DeFries, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi,
i really enjoy your theme. But with settingup some css-style i have some problems:
i would like to have a (semi-)transparent header with a full working sticky menu :). But all what i’ve found here in the other posts doesn’t work for me. :( : If the header ist transparent, the sticky won’t work and vise versa :(.

That’s what i have so far in Custom.css:

body {
  background-size: cover;
}

#main {  
  opacity: 0.7;
}

#colophon {
  opacity: 0.6;
}

Can you pls point me in the right direction?

Thanks in advantage

DeFries

Please excuse my poor english

URL: http://paratus-wot.iwdns.net

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 2 months ago DeFries

    Solved :)

    Following code works for me:

    body {
  background-size: cover;
}

.main-navigation {
  background: rgba(96, 96, 96, 0.8) !important; /* after using '!important' the prob was solved */
}

header#masthead {
  background: rgba(163, 163, 163, 0.6) !important; 
}

#main {  
  opacity: 0.7;
}


#colophon {
  opacity: 0.6;
}
  2. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi DeFries

    Super, glad to hear you made progress on this.

    Consider changing your #main and #colophon divs to also use RGBA. The problem with opacity is it also drops the opacity of the text in those divs. RGBA will target the background only.

    All the best.

  3. 10 years, 2 months ago DeFries

    Works like a charme :). Thx a lot. :)

    So for everybody else:

    /* Vantage set background image with full page width and box background semi transparent*/

body {
  background-size: cover;
}

.main-navigation {
  background: rgba(96, 96, 96, 0.7) !important;
}

header#masthead {
  background: rgba(163, 163, 163, 0.6) !important; 
}

#main {  
  background: rgba(232, 232, 232, 0.7);
}

#colophon {
 background: rgba(96, 96, 96, 0.7)!important;
}

    Do you have any sugestion how to make also the submenu’s semi transparent?

    TIA

  4. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Sure, here we go:

    /* Vantage - Adjust color and opacity of drop down menu items and drop down menu hover */

.main-navigation ul ul { background: rgba(200, 54, 54, 0.5) !important;  } 
.main-navigation ul ul li:hover > a { background: rgba(200, 54, 54, 0.5) !important;  }
  5. 10 years, 2 months ago DeFries

    Thx again :) Works superb.

  6. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad we could help.

    Chat soon.

    Cheers.

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