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.

Header transparent, sticky won’t work

Resolved 6 replies premiumthemetheme-vantage
DeFries
10 years ago · Last reply by Andrew Misplon 10 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. DeFries 10 years, 9 months ago

    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. Andrew Misplon Staff 10 years, 9 months ago

    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. DeFries 10 years, 9 months ago

    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. Andrew Misplon Staff 10 years, 9 months ago

    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. DeFries 10 years, 9 months ago

    Thx again :) Works superb.

  6. Andrew Misplon Staff 10 years, 9 months ago

    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.

Have a different question or issue?

Start New Thread