Archived topic
Semi transparent menu
10 replies · Started by Farokh on December 27, 2016
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! :)