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
Related
The menu icon located at the top right of my screen disappears when the page is scrolled & the header item becomes sticky. I have tried changing colours but the problem remains the same. I've tried altering the CSS manually & with different WordPress plugins. I've had no results.
Notice the menu icon on the right.
This is what happens after scrolling.
I think the header has style position: relative;
And the menu button is absolute, so when you change header position to sticky, header is not relative for menu button already.
Try wrap menu button with div tag, and set position relative to it.
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
I have a Responsive Top Navigation bar modeled from w3schools. Below that, I have various pages.
In the div, I have to specify a margin-top. The problem is when I resize the screen width, the menu goes to (2) lines. I can not figure out how to move the page content down to keep the same spacing between the menu and the page.
This might be happening because the top nav bar is positioned absolute. The absolute will make the top bar in a new layer. So the content is not moving down when top bar is in two lines. You can try removing the position absolute if the top bar has that style.
I've been working on my site: www.zdrctry.com.
I have a couple questions about the top navigation bar (containing Home, Contact Us, Cart, My Account):
How could I move the navigation bar down to the same level as the "Directory Theme" logo. It is similar to the Red Header of website: www.premiumpress.com.
I'd also like to know how to align the navigation links to the right side of the page.
How could I achieve this?
Put your navigation bar inside a div and make the div's width 100%. Now for the CSS for your nav bar element, put text-align: right.
To move the bar down, use absolute positioning and specify how far from the top of the page you want it.
I currently have a web page with a fixed navigation bar at the top. Everything works fine, except an image slider I have in the content of the website overlaps the fixed navigation bar when scrolling down, contrary to the rest of the site, which underlaps the bar when scrolling. I have the position: relative style attached to the slider & position:fixed to the navigation bar. I also tried adding z-index:1; to the nav and z-index:2 to the slider, which someone recommended in another post - with no luck.
I appreciate the help!
here is the URL to my problem: http://www.kyniko.com/golf/
Change the z-index of the navigation bar to be bigger than the z-index on the image slider. I went to your site, scrolled down until the image was on top of the nav bar, changed the z-index on the nav bar to 99 and the image went under it.