Topic: Hamburger Menu Jumping on Scroll

hichb
February 28, 2024 at 7:08 am

When scrolling down the page, the hamburger menu which is on the left appears to be slightly moving from left to right. I don’t know where should I go to fix this?

Ying

February 28, 2024 at 10:33 am

1. Remove this CSS:

 /* Style for the primary menu within the sticky navigation */
                .main-navigation.navigation-stick #primary-menu {
                    position: relative;
                    /* Position relative to its normal position */
                    right: -28px;
                    /* Move it to the left */
                }

2. Change this CSS:

.site-logo {
   position: absolute;
    z-index: 10000;
    left: 50%;
    transform: translateX(-50%);
}

TO:

.navigation-branding,.site-logo {
          position: absolute;
          z-index: 10000;
          left: 50%;
          transform: translateX(-50%);
}

3. Add this CSS:

span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon a {
    padding-left: 0;
}

#sticky-navigation .menu-bar-items {
    justify-content: flex-end;
}

#sticky-navigation .inside-navigation.grid-container {
    max-width:1200px;
    display: flex;
    justify-content: space-between;
}

.main-navigation.navigation-stick #primary-menu {
    width: fit-content;
}

hichb
March 1, 2024 at 7:17 am

Hi Ying,

The layout is nearly perfect! However, when I scroll down to view the sticky navigation, I noticed that the hamburger menu is now on the right and the subscribe button on the left. They seem to have switched positions. I have shared the link to the staging site privately for you to review.

Thank you for your assistance.

David

March 1, 2024 at 1:21 pm

Hi there,

in your CSS you have this rule:


#site-navigation .inside-navigation, 
#site-navigation .inside-navigation .menu-bar-items {
   flex-direction: row-reverse;
   gap: 10px;
}

Change it to:


nav:is(#site-navigation, #sticky-navigation) .inside-navigation, 
nav:is(#site-navigation, #sticky-navigation) .inside-navigation .menu-bar-items {
   flex-direction: row-reverse;
   gap: 10px;
}

hichb
March 1, 2024 at 2:47 pm

Thank you! Worked!
David
March 2, 2024 at 3:15 am

Glad to hear that

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Hamburger Menu Jumping on Scroll