Menu icon Foundation
Sticky Nav and Visibility Class issue

Hello, 

 

I'm having a slight issues with the my sticky nav, and hopefully someone can help. 

 

I have a sticky top-bar nav that works great for the most part. The only issue I'm getting is when I add in .show-for-medium as I only want this nav to appear on medium and large screens.

As long as I don't resize my browser window to hide the nav, I'm good.

It's when I resize the browser window to small, the nav disappears like I want. Then if I scroll down the page, then while scrolled down a bit on small screen, resize the browser back to medium or large, then scroll back up to the top of the page the top-bar nav position if off, overlapping the content that should be below it. This doesn't happen if I remove the show-for-medium and the nav displays on all sizes. So to me, that means there is a bug when using with visibility classes. 

 

I don't have a jsfiddle or codepen setup, but you can view my dev site  HERE

 

So if you go to the link above, follow these steps to recreate my issue. 

 

  1. First, while in medium or large screen size, scroll up and down. You will notice the nav bar properly returns to where it should when you scroll back to the top of the page. This is the expected behavior.
  2. Resize your browser window until it reaches the small screen breakpoint and hides the nav bar. 
  3. Scroll down the page a little. 
  4. While the screen is scrolled down in small, resize your browser to large.
  5. Then scroll back to the top of the page. You will notice the nav menu's position is off and is overlapping the content below it. 

Just in case someone asks why I'm hiding on small. This is because I'm going to use a 3rd party plugin for the mobile menu.

 

Thanks in advance!

 

Ryan 

Sticky navvisibility classes

Hello, 

 

I'm having a slight issues with the my sticky nav, and hopefully someone can help. 

 

I have a sticky top-bar nav that works great for the most part. The only issue I'm getting is when I add in .show-for-medium as I only want this nav to appear on medium and large screens.

As long as I don't resize my browser window to hide the nav, I'm good.

It's when I resize the browser window to small, the nav disappears like I want. Then if I scroll down the page, then while scrolled down a bit on small screen, resize the browser back to medium or large, then scroll back up to the top of the page the top-bar nav position if off, overlapping the content that should be below it. This doesn't happen if I remove the show-for-medium and the nav displays on all sizes. So to me, that means there is a bug when using with visibility classes. 

 

I don't have a jsfiddle or codepen setup, but you can view my dev site  HERE

 

So if you go to the link above, follow these steps to recreate my issue. 

 

  1. First, while in medium or large screen size, scroll up and down. You will notice the nav bar properly returns to where it should when you scroll back to the top of the page. This is the expected behavior.
  2. Resize your browser window until it reaches the small screen breakpoint and hides the nav bar. 
  3. Scroll down the page a little. 
  4. While the screen is scrolled down in small, resize your browser to large.
  5. Then scroll back to the top of the page. You will notice the nav menu's position is off and is overlapping the content below it. 

Just in case someone asks why I'm hiding on small. This is because I'm going to use a 3rd party plugin for the mobile menu.

 

Thanks in advance!

 

Ryan 

This post has been closed. No new replies can be added.

Rafi Benkual over 2 years ago

Hmm, that is an odd one. Have you tried adding a wrapper to the menu with the visibility class? May work better then hiding the actual sticky.

Ryan Patterson over 2 years ago

Hi Rafi,

 

Thanks for getting back to me. That actually did work! It's not updated in the link I provided yet, but is working great now on my local copy. 

 

Thanks again!