Site logo

Archived topic

Semi transparent menu

10 replies · Started by Farokh on December 27, 2016

Viewing posts 1–11 of 11

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

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 );
}

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

Try this CSS:

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

Let us know.

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

You could try this:

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

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

I hope my explanation wasn't too vague.

In case it was, please take a look @

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

Thanks

Ah, try this CSS:

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

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.

Awesome, thanks for sharing your code! :)

This archived topic is closed to new replies.