Fixed navigation not working because of absolute position?

Hi,

I am trying to create my fixed navigation inside my “header” i have set the header to position relative the content to absolute and the navigation inside the header to “fixed”. It is fixed however, the navigation is not inside the header but staying “fixed” on the bottom of the screen.

Can somebody help me to set the navigation to fixed but inside the header only?

URL:

Thanks for the help.

It seems to work as requested without this rule. How about commenting it out completely and see if the result is what you want?

zpeedy.css (line 161)

header nav {
    bottom: 0;
    position: fixed;
    width: 100%;
    z-index: 100;
}

EDIT:

It looked quite good at first, but…
You are changing the contents of the header… the page is not doing well.

Hi Ron,

I have commented out the header nav rule…

the navigaton is staying at the bottom of the HEADER however when scrolling i want the navigation to stay fixed all the time but it’s not working.

Do you know whats causing the problem?

Problem? Obviously the code is not obeying your wishes.

 

You can try someting like this:
take zpeedy-navigation out of main and perhaps put it above or below main, whichever you wish, and change the css from position:absolute to position:fixed.

<body>
    <div class="zpeedy-navigation">...</div>
    <main>...</main>

zpeedy.css (line 149)

div.zpeedy-navigation {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 500;  /* ADD Me, too */
}

Perhaps this is closer to your wishes.

Did you change your mind about using a fixed footer?

Hi,

The header is set to position relative and the navigation DIV outside is absolute bottom and the nav inside the header should be fixed on scroll but when i set it to fixed… it is working but the navigation is moving and not staying inside my header. Thats the problem i am facing.

Thanks

I’m not sure what you said. I cannot picture the dynamics you are trying to describe.

If you change the position of div.zpeedy-navigation from absolute to fixed it will become a fixed footer and remain at the bottom of the screen. That’s what fixed footers do.

If you want something different, please explain it again. You might even attach a make-believe screen shot showing what you want.

    div.zpeedy-navigation {
        position: fixed;  /* changed from :absolute */
        width: 100%;
        bottom: 0;
        left: 0;
        z-index:500;  /* Added */
    }

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.