Archived topic
transparent navigation menu in mobile view
10 replies · Started by Fekry on May 11, 2020
Hi there
I have a navigation menue with #ef5f00 color, it"s good in desktop and tablet.
In "mobile view" I want to keep same color when the menue does not drop down. But when it drops down I want it become a transparent background with rgba(12,3,7,0.57), , so the menu does not hide the image.
May you help please?
thanks
Hi there,
You have quite a long menu on mobile.
Have you considered using the off canvas panel on mobile only?
https://docs.generatepress.com/article/off-canvas-panel-overview/
Let me know :)
I've already created an off canvas overlay panel on mobile only. I want to have something as in this site mobile view (link below). So, I need to:
1- Align the menu items right (for Arabic), and put arrows (for sub menu) left as in this site
2 - How can I create another off canvas overlay panel for secondery menu in top bar as in that site and also align its items right?
https://expertvagabond.com/
Thanks
1. Isn't this already the way?
https://www.screencast.com/t/rM6rr3VrzqX
2. Only one off canvas navigation can be used currently.
I would recommend combining the menu items into one menu.
I need to align this menu items right (for Arabic), and put arrows (for sub menu) left as in this site mobile view.
https://expertvagabond.com/
Hi there.. still wait your help.
Try this CSS:
#generate-slideout-menu.do-overlay .slideout-menu li a {
display: flex;
}
.slideout-navigation.do-overlay .menu-item-has-children .dropdown-menu-toggle {
margin-right: auto;
}Thanks Leo. It works basically, but I've two issues:
1- I need menu items starts far right and the arrows far left.
2- The first menu item conflicts with the header. Need to solve that please.
1. Try this:
.slideout-navigation.do-overlay .inside-navigation .main-nav {
margin-left: 0;
margin-right: 0;
}2. Not sure if I'm seeing this issue?
https://www.screencast.com/t/hQ8lwazqk
Perfect. thanks
No problem :)
