“Hamburger menu”/ mobile menu displays off the screen

  • Resolved renrec

    (@renrec)


    2 years, 3 months ago

    I am using the css code to better align my primary menu on the desktop view.

    div#main-navigation {
    margin-left: -165px !important;
    }

    But when the menu changes to the Hamburger/mobile menu, it pushes the menu items off the screen where users can see them.

    What CSS code changes do I need to do to make the mobile menu display with the “margin-left: -0px” which displays correctly?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @renrec,

    Thanks for choosing Hestia!

    You can use media queries to target only devices that have the width smaller than a certain value so, in this specific case, the CSS only takes effect on mobile devices. Please replace your CSS with the one below and check if it helps.

    @media(max-width:768px){
div#main-navigation {
margin-left: 0px !important;
}
}

    Have a nice day!

Viewing 1 replies (of 1 total)
  • The topic ‘“Hamburger menu”/ mobile menu displays off the screen’ is closed to new replies.