First: I am sorry about my english
here is my problem
when the page was opened
fixed navbar is still work properly
after the user scrolls down, the navbar will move up and left haft of it.
In the navbar class I added "is-fixed-top" and in the body class I added "has-navbar-fixed-top"
Beginner
Thanks
Related
How to let the elements in the page go under the sticky navbar when scrolling down and not above it and hide it ?
I copied the code from w3 schools to my Angular project but when i scroll down, all the elements go above the navbar and it hides it.
You need to probably add a z-index to the navbar to make it present on the foremost layer of the screen.
Have a look at this link for a much deeper information on the same.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
On my website I use pure.css and the navbar consists of more elements than a small screen can display without scrolling. Therefore a scrollbar appears in that case, which I don't want.
I would like the navbar to stay at the top so that the navbar and the content scrolls simultaneously. When I use position:absolute; everything looks even worse. Also the mobile version of that navbar should still work (on mobile screens scrolling though the navbar should still be possible).
I also tried to deactivate overflow-y, but then, obviously, not every element on the navbar is clickable.
If you want that navbar and content scroll simultaneously, you shouldn't use position:fixed.
Remove position:fixed
Add float:left to menu div
Add float:right to content div
If I misunderstood what you want, the comment made by Marco Valente should be nice.
I made a fixed navbar, but when I scroll you see the navbar behind the other images. I don't know what I am doing wrong. Here is a link with the navbar (it supposed to fit in the white bar but in Dreamweaver it all looks good).
So I want the fixed navbar that scrolls over all the divs. Please help.
Thanks
Could you use in your CSS the z-index property?
Like so:
z-index:999;
So, I've spent about 9 hours straight on this, and I was wondering if anyone could help me.
For some reason, this block of code shifts over my navbar to the left by about a pixel. I don't really understand why, I thought I screwed up with some tags, but after experimenting, I've narrowed the problem down right to [here][1].
[1]: http://pastebin.com/2iZwnFZs (not available anymore)
Figured it out!
A friend told me to use CSS to fix this, here's the CSS I used:
body {overflow-y: scroll; overflow-x: hidden;}
The cause of the navbar shift was the scroll bar, the code above will hide the scroll bar when it overflows data horizontally.