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..!
Related
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
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 am working on a Drupal-7 website using the openpublic theme.
I have modifed the css to make the header fixed, but when I scroll the page - the content scrolls over my navigation menu. Can anyone tell me what needs done to prevent this? The content also scrolls above my header. I would like the content to stay below my header and menus.
I have chosen a specific page, because the template for the front-page is different.
Thank you in advance.
it happened because your div position is set to fixed.
example
.div_class_name {
position:fixed;
}
Changing the value might help.
You can use firebug(Firefox) or Chromebug(Chrome) to check your CSS .
I placed a sticky navigation on my page which should always be visible on front. When you scroll down on page 2 of my site you'll find out that the navigation is placed behind some other buttons.
Could someone please help me with placing it always on the front?
This is the url of page 2 of my site: http://kmnew.kadushimarketing.com/index.php#targetAnchorPage2
Just scroll down and you'll see what I mean.
Solved! I set the z-index to 999999.
Two pages, one with <a href='some_url#some_name'>, and second, on some_url, with <a name='some_name'>.
So after clicking on URL1, page 2 loads, and URL2 is on the top of the the page.
Now about the problem: this URL2 hidden under twitter-bootstrap's top menu, which have fixed position.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I'm tried both Firefox and Opera, it seems no browser dependency.
However, when I'm checking named links on Twitter Bootstrap's site, no such problem appears.
I guess you are referring to the link in the navigation span on the left of each page. If you look at the css, specifically the docs.css file, which contains the style rules for the documentation website, you'll find out that every section has a padding and that's why they don't appear below the navbar.
As you can see the section does start hidden by the navbar, but the padding moves the content down so it became visible.
Hope this helps.