[Resolved] Navigation menu in mobile view

[Fekry]

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 */
}

[Leo]

Hi there,

Try this CSS:

.slideout-navigation.do-overlay .inside-navigation {
    padding: 10% 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Fekry]

It works perfect.
But “×” sign covers the logo, So I want to put the “×” next to Hamburger button as “expertvagabond” picture.
Thanks

[David]

Can you disable Autoptimize so we can provide the correct CSS?

[Fekry]

Sure, I Deactivated Autoptimize plugin. May you try now please.

[David]

Do you want it exactly the same as that site?
If so deactivate the Customizer > Layout > Off Canvas

[Fekry]

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?

[Tom]

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

[Fekry]

Perfect, thanks Tom.

[Tom]

You’re welcome 🙂

[Author]

Posts