[Resolved] Semi transparent menu

[Farokh]

Hi Tom 🙂

I use page header to have transparent menu, and when I scroll down, and go to other pages my sticky menu background is white which is good.

I only need to make the sticky menu background semi transparent on every page.

Thank you

[Tom]

Transparency is coming to background colors in the next version of GP Premium.

For now, you could do this:

.main-navigation.navigation-clone,
.main-navigation.is_stuck {
    background: rgba( 255,255,255, 0.5 );
}

[Farokh]

Thank you and how can I have semi-transparent sub-primary menus items?

[Leo]

Try this CSS:

.main-navigation .main-nav ul ul li a {
   background: rgba( 255,255,255, 0.5 );
}

Let us know.

[Farokh]

Great, thank you Leo

There is always one more question;

Is it possible to have Only Primary sub-menus in rtl direction?

I tried something like this:

.main-navigation .main-nav ul ul li a {
   direction: rtl;
}

Did not work

[Tom]

You could try this:

.main-navigation .main-nav > ul > li > ul > li a {
    direction: rtl;
    text-align: right;
}

[Farokh]

It’s almost perfect, only the BOX which contains primary sub-navi items opens to the right (instead of left), putting sub-items of one primary item under a different primary item

[Farokh]

I hope my explanation wasn’t too vague.

In case it was, please take a look @

lingaline.com > Menu Item: تماس با ما

Thanks

[Tom]

Ah, try this CSS:

.main-navigation ul ul {
    left: auto;
    right: 0;
}

[Farokh]

PERFECT 🙂 Thank You.

Off course, I added some padding to sub-nav items to stand in line with the primary item 🙂

Here is the full CSS for a fully functional RTL menu, with a touch of transparency, and without toggles:

.menu-item-has-children .dropdown-menu-toggle {
        display: none;
}
.main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 20px;
}
.main-navigation {
        direction: rtl;
        text-align: right;
}
.main-navigation .main-nav > ul > li > ul > li a {
        direction: rtl;
        text-align: right;
        padding-right: 20px;
}
.main-navigation ul ul {
    left: auto;
    right: 0;
}
.main-navigation.navigation-clone,
.main-navigation.is_stuck {
        background: rgba( 255,255,255, 0.9 );
}
.main-navigation .main-nav ul ul li a {
        background: rgba( 255,255,255, 0.9 );
}

I changed the order a bit;
Off course, I don’t know if the order matters, or if it’s in the right order.
But it worked great for me.

[Tom]

Awesome, thanks for sharing your code! 🙂

[Author]

Posts