Hi everyone,

There has been a thread on fixed navigation and a warning that it should be used with caution.
I have tried it on this page (650px and higher)
http://jewelry-tutorials.com/jewelry-ma … -list.html

And yes, the fixed navigation does not display correctly - entire column not visible or scrolling over the footer section.

Is there a fix or another way to approach a left side navigation bar?

Thanks in advance.

Regards,
Anne

If you want it pinned to that position it seems this is done the correct way. I you want the navigation section to scroll change it's position value from absolute to relative and the footer will not scroll under is.

Hi Bob,
Thanks for having a look.
I changed (column and container) position from absolute to relative but had the same issue.

In image "navigation-left" the navigation bar scrolls over the footer.
On a small screen "navigation-left-small-screen" only the first three text links of the navigation bar remain in view as the right contents scrolls past.

My objective is to have all 15 links on the left navigation bar in view at all times which then stops before the footer section as the very long right info / content section scrolls down .

Is that possible in RSD?

Regards,
Anne

Can you upload your project file Hans and post a link to it so we can look it over?

Hi Scott,

This is the page with the fixed left navigation bar
http://jewelry-tutorials.com/jewelry-ma … -list.html

The images, which I attached previously show the issue I get with fixed column. I changed the absolute / relative settings as Bob suggested but the issue remained.

I'm also attaching the .rsd folder

If it is possible, I would like the Navigation Column to be fully visible when the page is scrolled down without covering the footer when the page is scrolled to the end

Thanks,
Hans and Anne

I see what you mean now. Interesting case, it can be nice when done well but it's probably not very easy.

The only way I can see this being done is to reserve the full left side of the document for the navigation so the foorter would scroll next to it. This is just conceptually — I would need to build it to make sure it works — but I think I would make a 1st row with the following column structure:

1. The first with a span 2 (or 3 if you need more width) that holds the nav container,
2. Then 3 columns (of 3 spans) with your main content blocks.
3. Then a new row with 3 columns (of 3 spans) for the rest of the content, add an offset of 2 (or 3 depending on the width of the nav column) to make room on the left for the sticky nav.
4. Repeat this structure (also for the footer)

Set the position property for the nav container (not the column) to fixed. This should make all content scroll next to it and prevent the right-side / main content to go under the navigation at smaller widths. At some point you probably want to position the navigation up top though or use an icon that overlays the menu.

Hope this helps!

Hi there
I agree with Bob.
Set the height of the column with the navigation to 100vh
<style>
.column{
height: 100vh !important;
}
</style>

Hello Bob,

Thanks for the tip. I'm going to follow your instruction on a blank page and see how far I get.

Yes, you're right about the navigation position on smaller screens. On the linked page below, I have set the navigation column to none and have a menu icon as replacement in the top section from 480px --> smaller, .

On the page http://www.jewelry-tutorials.com/jewelr … ubing.html I tried another method by repeating the 15 text links container on the navigation bar 2 or 3 times, depending on length of overall page. This does solve the problem of having a huge empty left side column and difficult to reach access to other linked pages within the website. But it is not a perfect responsive solution, since the page gets longer as the screen size gets smaller.
I'm a bit worried about the SEO aspect of such an action.

Regards,
Anne

That's my point, you should try to place the nav outside of the main content, outside of that big border. If you can also keep it small enough (user smaller fonts maybe?) it will not appear as a huge empty columns.

Alternatively you can try to use a sticky header, keeping the nav always visible up to. The content scrolls under it.

Bob, much appreciated. I'll will look at your sticky suggestion.

And Chris, thanks for the example. That helped visualize the concept looking at the design values and html setting.

Warm regards,
Anne