[Resolved] Setting a top margin for a sticky menu navigation on mobile

[Dominique]

Hi,

on mobile I have an AddThis sharing bar that is displayed at the very top of the viewport. It measures 40 pixels in height.

In order for that bar not to sit over or conflict with the navigation menu I have
.mobile-header-navigation {margin-top: 40px;}
applied, which works great. The AddThis bar is displayed first, then the mobile menu precisely after, and then the content.

Now I would like to enable sticky menu on mobile but I need the navigation to never move under the AddThis bar, which remains fixed at the top always.

I have tried the following code, which I found in this thread

/* Mobile sticky nav position */
#mobile-header.is_stuck {
  top: 40px !important;
}

It almost works but not quite… During the first 40 pixels of a scroll down the menu will move under the AddThis bar until it reaches its ‘sticky’ status, at which point it moves back to its correct location (40px from the top), below the bar.

How can I make sure the mobile menu never moves within the first top 40px of the screen? Easy solution would be to move the AddThis bar to the bottom of the viewport but that space is reserved for ads so I can’t do that…

[Ying]

Hi Dominique,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Dominique]

Sure but the sticky menu is not enabled yet as I am working on a staging environment until I can find a solution

[Dominique]

So it turns out the solution was a lot simpler than I imagined. I simply swapped .mobile-header-navigation {margin-top: 40px;} to .mobile-header-navigation {padding-top: 40px;}

[Ying]

Glad you figured it out 🙂

[Author]

Posts