One Page Navigation

Support
#1

Hi,
I’m building a one page website with a transparent navbar. I have used the following code to get the first section of the page under the transparent navbar:

.home.x-navbar-fixed-top-active .masthead {
position: absolute;
top: 0;
width: 100%;
}

It works until I click on one of the navigation links that scrolls down to the next section. Here’s the problem: The top of the section stops at the bottom of the navbar instead of scrolling all the way under it, to the top of the page. I have set up anchor points for each section via a CSS ID in Cornerstone and put those anchor links in the Wordpress menu.

When I click on a navigation link, how can I get each section to scroll up so that the top of the section stops at the top of the page and doesn’t stop at the bottom of the transparent navbar?

Thanks!

#2

Hi There,

Please remove

.home.x-navbar-fixed-top-active .masthead {
position: absolute;
top: 0;
width: 100%;
}

and add instead:

.x-main.full {
    margin-top: -122px;
}

Let us know how it goes

#3

That didn’t work, unfortunately.

#4

Hi there,

I have checked your test page and the one page navigation seems to be working fine.

If you click on a link, the page should slide to the top part or the start of the section.

If we missed the issue you are trying to point out, kindly provide us with a screencast so that we’ll understand it better.

Thank you.