[Resolved] completely transparent menu

[dasigna]

another round trying to achieve a special look and stuck …

following target:
i want only one single page to have
– no header (easy)
– no main navigation on first approach, only sticky menu when scrolling down (via css)
– (sticky) menu all (!) backgrounds transparent (…?)
– font always white with shadow (check)
– /all that with secondary menu the same.

got quite near that with two exceptions – i cant get rid of the active and hover background states of the (primary as well as secondary) menu, no matter what i’m trying. wasnt be able to find the right selectors for that, or if thought so they went being overwritten by other native css (?).

so i’m asking for a hint how to get rid of the last issue with backgrounds … 🙂

btw: header-addon does not serve well for my intentons (referring bg’s arent getting transparent eighter) ! but custom-css-plugin is a great help so far.
the only thing i’m struggling with at the moment is the complete transparency of ALL bg’s within the menu.

any help welcome with thanks in advance.

[Tom]

Hi there,

The selectors you’re looking for:

.main-navigation .main-nav ul .current-menu-item > a,
.secondary-navigation .main-nav ul .current-menu-item > a {

}

Let me know if you need more info 🙂

[dasigna]

once more got by with a little help from …

if there werent any ocean between us, it would be the time for having some coffee together!
as sometimes its hard to figure out things while being much more a designer than a coder, those little hints are very appreciated. thanks to tom.

in fact those selectors had been choosen before, but it was a little more complicated to do… but finally i got it!

if anyone is interested, heres the transparent-menu-css for the single page (added some highlighting though):

/* DONT SHOW MAIN NAV */
.main-navigation {
     display: none;
     }

/* OVERRIDE STICKY NAV BG */
.main-navigation.navigation-clone.navigation-stick {
     background-color: transparent;
     }

/* SET NAV TEXT TO WHITE WITH SHADOW AND ELIMINATE ALL ACTIVE AND HOVER BG COLORS */
.main-navigation .main-nav ul li a, .menu-toggle {
     color: #fff !important;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
     background-color: transparent !important;
     }

/* OVERRIDE SUB-MENU BG and BOX-SHADOW */
.main-navigation ul ul {
     background-color: transparent;
     box-shadow: none;
     }

/* NAV BG COLOR ON HOVER*/
.main-navigation .main-nav ul li a:hover {
     background-color: rgba(0,0,0,0.2) !important;
     }

as from time to time its some challenge to realize things with GP that those popular ‘big’ themes offer right out of the box its worth the effort (who still wants those code-boated lame ducks? … 🙂 )
thanks to GP and tom.
if theres a case i can help you out with design, let me know! 🙂

thanks again.

[Tom]

Awesome, thanks for posting the code!

Always happy to help out where I can 🙂

[Author]

Posts