[Support request] Navigation below header on mobile

Home Forums Support [Support request] Navigation below header on mobile

Home Forums Support Navigation below header on mobile

  • This topic has 3 replies, 2 voices, and was last updated 1 month ago by Ying.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2052515
    Michael

    Hi, using Sider css for left-side vertical navigation where Primary Navigation is set to Float Right.

    On mobile and tablet I want Navigation to be Below Header.

    Is that possible?

    #2052546
    Ying
    Staff
    Customer Support

    Hi Michael,

    Try this CSS:

    @media (max-width: 768px) {
    .main-navigation {
        width: 100%;
    }
    }

    Let me know if this is what you want 🙂

    #2052556
    Michael

    Thanks Ying,

    That sort of worked but everything is offset to left instead of being centred and there is a big space under the cart and menu hamburger.

    #2053114
    Ying
    Staff
    Customer Support

    You have this CSS in your child theme which adds 50px top and bottom margin:
    https://www.screencast.com/t/jgbZi6MBbRyG

    You should give it a media query like@media (min-width: 769px) to limit it to desktop only.

    Then add this CSS to align the logo to center and align the toggle to right.

    @media (max-width: 768px) {
    .inside-header.grid-container {
        justify-content: center;
    }
    button.menu-toggle {
        text-align: right;
    }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.