Canvas Support

How to make the Dark Primary Menu Dropdown semi-transparent?

2 replies·opened Dec 28, 2017
B
bischofjuliaDec 28, 2017

Hi,
I am using the dark theme. I am using a menu with only one sub-level. I would like to have the background of the first level of dark dropdown semi-transparent, so the full-screen slider images are still a bit visible. Could you please point me to the .css entries I have to modify to be able to do that? I am assuming I will add them to custom.css.
Thanks very much
Julia

Header: 

<header id="header" class="transparent-header full-header"  data-sticky-class="not-dark">
			<div id="header-wrap">
				<div class="container clearfix">
					<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

........ then

<nav id="primary-menu">
	<ul>
		<li class="current"><a href="#"><div>Pinzgauers</div></a>
			<ul>
			<li><a href="#"><div>Origins</div></a>
			</li>
			<li><a href="#"><div>Attributes</div></a>
			</li>
			<li><a href="#"><div>Cross Breeding</div></a></li>
		        </ul>
		</li>

etc....

S
SemiColonWebSTAFFDec 30, 2017

Hello,

Simply use the following CSS Code: 

.dark #primary-menu:not(.not-dark) ul ul,
.dark #primary-menu:not(.not-dark) ul li .mega-menu-content,
#primary-menu.dark ul ul,
#primary-menu.dark ul li .mega-menu-content { background-color: rgba(0,0,0,0.8); }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

B
bischofjuliaDec 30, 2017

Awesome, THANK YOU !

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard