I have a webpage with multiple sections. We can navigate from one section to another with a nav bar fixed at the top of the page (with sticky position).
When I am in a certain section on my page, I want the corresponding title on the nav bar to be a different color to indicate that this is the section we are on, but I don't know how to do it.
I need to do it with css only (not javaScript).
Thank you!
You may want to have a look at the scrollspy plugin
https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
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
For example, please check this site (not mine - just for reference) Link
I have the same theme as this site.
On ref. site pages (other than Home page), Header appears in the form of sticky Navbar.
But at the Home page, There is transformation between Header and Navbar. When user scrolls down header converts into Navbar and vice-versa .
I want it to keep Sticky Navbar (just like other pages) in my Home Page as well... Thanks
If you just want your menu to stick to the top of the page as it is when it reaches it add position:sticky to your header container div CSS.
[How to create a sticky navbar just visit this site 1
Hope this helps...
Regards..!
In my site I have a responsive nav bar with a header at the top of the page. When the nav bar is opened, the div with the header is pushed down with it.
How is it possible for the nav bar to simply go over top of the div without pushing it down.
Link to the website
Thanks in advance.
Nice name Vlad.
style = 'position:absolute;' will make it so that the dimensions/position of the element you attach it to do not affect any elements other than its children.
Mozilla Dev Reference
I have added the bootstrap collapse bar to my menu, it is working as it should, however since I have a unique nav bar that is in a fixed footer, it's not expanding and showing the nested content when the button is hit.
My educated guess is because it drops DOWN and there is no space under my footer as it's the lowest element on the page. Is there a way to make the direction go upward?
Here is a link to the site, so hopefully the source code will be enough. If not please let me know what you would like me to post on here.
It's also important to point out that I've tested this in the header and it does not function there either...
I'm having an issue with the Twitter Bootstrap template. At http://www.tjprizbiz.com/new/publications.html, I am trying to have my side bar nav jump to each different project, but since all my projects are contained in a span9, anytime I click a side nav bar option it just goes to the top of my container span9 projects column. I know I need to fix my href of the sidebar nav buttons but I don't know how to make it search within the span9 section id's. Any Ideas?
PS: I cant get my code to paste but you can get the page source # www.tjprizbiz.com/new/publications.html