Skittering on homepage top navigation bar when you scroll down

Shapely
1

Hello: When I scroll down on my homepage (http://dustinmorrow.com/), the navigation bar produces a “skittering” effect. Is there any way to get rid of this? Thank you!

2

Hi @amoeba12,

I hope you are well today and thank you for your question.

You can try getting rid of it by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


nav#site-navigation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999;
}

Best Regards,
Movin

3

Hello @Movin and thank you for your help. While this custom CSS did stop the skittering, it made it so the navigation did not work at all. The Navigation bar at the top still appeared, but I could no longer click on any of the navigation links, and the dropdown menus no longer appeared. Is there any way to get the skittering to stop, but to also allow the navigation still to work? Thanks for your kind assistance!

4

I have modified the above shared custom CSS code so please try using that.

5

Thanks so much–I will give it a try! I appreciate your help!

6

Hi @movin, sorry to bother you again. We’re almost there! This works, again, to a point. When I use this CSS, the skittering is gone on the homepage and the top nav now works, but the final (hopefully!) problem to tackle is that the Title (H1) of the page is obscured by the top navigational menu when I use this CSS. Is there any way to add to the CSS or modify it so the skittering is gone from the homepage, the navigational menu works, and the H1 Titles of the pages are not obscured by the top navigation? Thanks again for your kind assistance–sorry for all the questions!

7

I don’t see the issue “pages are obscured by the top navigation” on your shared site so could you please share the screenshot of the issue so that i can help you to resolve it?

8

Hi @movin thanks for your prompt reply! Attached are two screenshots to illustrate the issue. I’ve taken this particular CSS off the live site for now so that the H1s on the pages still display, which is why you won’t see the obscured header issue on the live site for now (though the homepage skittering still exists).

The first screenshot: “Dustin Site No Code” is how a page on the site looks without the CSS provided above. The second: “Dustin Site Issue” is what the same page looks like after I applied the CSS. Note that the page is scrolled all the way to the top (see the red arrow pointing to the scroll bar in the screenshot) and that a little of the header is peeking out (see the red circle around the little bit of header peeking out) from under the top navigation. I cannot scroll any further to the top to reveal the entire header. So while the CSS works well to eliminate the skittering on the homepage and allow the top navigation to still work, it seems to obscure the H1s on the pages that are not the homepage. Thanks for your kind assistance!

9

To resolve that issue please also use the below custom CSS code along with the above provided CSS code.

#page {
    margin-top: 110px;
}
10

Thanks so much @movin. Again this mostly works, but I’m wondering if there’s a way to set a separate margin-top (or other class/element) on the static parallax homepage and a different margin-top for the other pages on the site? When I apply the margin-top to the #page class it gives a little too much margin on the static homepage–particularly on browsers other than Chrome. That is: When I reduce the px to accommodate the homepage (to, say 80px) the homepage looks better, but the rest of the pages don’t have enough room at the top for the H1. Again, this is particularly in browsers other than Chrome. Thanks for your continued assistance!

11

To use different margin on home page use the below CSS code.


body.home #page {
    margin-top: 90px;
}