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.
- 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.
- Resize your browser window until it reaches the small screen breakpoint and hides the nav bar.
- Scroll down the page a little.
- While the screen is scrolled down in small, resize your browser to large.
- 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!