[Resolved] Navigation menu in mobile view

Home Forums Support Navigation menu in mobile view

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1305223
    Fekry

    Hi there
    This is my navigation menu in mobile view:
    fekry.png
    I wish it become like this:
    wanted.jpeg
    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 */
    }

    #1305491
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

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

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

    #1306196
    Fekry

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

    #1306287
    David
    Staff
    Customer Support

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

    #1306304
    Fekry

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

    #1306319
    David
    Staff
    Customer Support

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

    #1306520
    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?

    #1307071
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #1308897
    Fekry

    Perfect, thanks Tom.

    #1309003
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.