Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Adjustments Needed for Mobile Navigation Layout

  • randika
    March 27, 2024 at 10:23 pm

    Hi,

    I’ve been working on refining the mobile navigation layout for my site and encountered a few issues with the current setup. Specifically, the logo is not positioned correctly, and the search and cart icons aren’t aligned as intended.

    To give you a better idea, here’s what I’m aiming for with the layout:
    •The toggle menu (hamburger menu) should be on the left.
    •The logo should be centered but closer to the toggle menu on the left.
    •The search icon and cart icon should be aligned on the right side.

    I have entered my website address in private information.

    Best,
    Willya

  • Alvind
    March 27, 2024 at 11:58 pm

    Hi there,

    Try this CSS:

    @media screen and (max-width: 768px) {
  .inside-header.grid-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
  }
      
  .menu-bar-items {
    order: 3;
  }
      
  .menu-toggle {
    order: 1;
  }
      
  .site-logo {
    order: 2;
  }
}
  • randika
    March 28, 2024 at 12:00 am

    Hi Alvind,

    I’ve added the CSS you provided, but it doesn’t seem to be working as expected. Could you please take a look at the live URL and see the result for yourself?

  • David
    March 28, 2024 at 4:51 am

    Hi there,

    remove that CSS, and try this:

    
@media(max-width: 1188px){
    header .inside-header {
        position: relative;
        padding-left: 80px;
    }
    .main-navigation .menu-toggle {
        position: absolute;
        left: 20px;
    }
    nav.slideout-navigation.do-overlay .slideout-exit {
        position: fixed !important;
        right: unset;
        left: 24px;
        top: 4px;
    }
}

    in the CSS, you will see this rule:

    
nav.slideout-navigation.do-overlay .slideout-exit {
    position: fixed !important;
    right: unset;
    left: 24px;
    top: 4px;
}

    That is optional is simply positions the Close icon toggle in the same place as the hamburger toggle.

  • randika
    March 28, 2024 at 6:32 pm

    Wow, thanks David. You saved my day.

  • David
    March 29, 2024 at 5:18 am

    Glad to be of help

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.