Archived topic
Navigation menu in mobile view
9 replies · Started by Fekry on May 28, 2020
Hi there
This is my navigation menu in mobile view:
https://www.screencast.com/t/crTCiq4Q1N
I wish it become like this:
https://www.screencast.com/t/hjWy6H0lA36h
1- menu items are far right and arrows are far left (Arabic site).
2- Align sub menu items right.
Could you kindely help me?
thanks
...........
Note: I use this CSS:
.push-down {
margin-top: 2em;
}
body .main-navigation .main-nav ul ul li a {
font-size: 18px;
}
#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;
}
.slideout-navigation.do-overlay .inside-navigation .main-nav {
margin-left: 0;
margin-right: 0;
}
.slideout-navigation.main-navigation.do-overlay .main-nav ul ul li a {
font-size: 18px !important;
}
.single .entry-title {
font-size: 34px;
line-height: 1.4em;
}
body .oceanwp-mobile-menu-icon {
float: none !important;
}
.site-logo.mobile-header-logo img {
padding: 0;
}
.secondary-navigation .menu-toggle {
display: none;
}
#mobile-header .site-logo {
position: absolute;
left: calc( 50% - 40px); /* 50% from the left - half your image width */
}
Hi there,
Try this CSS:
.slideout-navigation.do-overlay .inside-navigation {
padding: 10% 0;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
It works perfect.
But "×" sign covers the logo, So I want to put the "×" next to Hamburger button as "expertvagabond" picture.
Thanks
Can you disable Autoptimize so we can provide the correct CSS?
Sure, I Deactivated Autoptimize plugin. May you try now please.
Do you want it exactly the same as that site?
If so deactivate the Customizer > Layout > Off Canvas
temporarily or permanently?
I want the "mobile Menu Close Icon X" to be next to Hamburger button, and keep Off Canvas features also.
When mobile/responsive menu is opened, I need 'X' next to hamburger icon is. It makes it more user friendly when a person is using the right corner to open a menu.
What should I do David?
The screenshot you shared with the result you want is just our standard mobile menu - no off-canvas panel needed there.
If you want it how you have it now but with the close icon where the toggle icon is, try adding this:
@media (max-width: 768px) {
.slideout-navigation.do-overlay .slideout-exit {
position: absolute;
top: 47px;
right: -8px;
}
.slide-opened button.menu-toggle {
opacity: 0;
}
.slideout-navigation.do-overlay .inside-navigation {
padding-top: 120px;
}
}Perfect, thanks Tom.
You're welcome :)
