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.
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 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.
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'm trying to create a bootstrap nav bar with three areas. Left, Middle, and Right.
Left side will have a user avatar portrait bar, middle will be a search bar, and right will be some buttons.
I'm having trouble centering the search bar. Any ideas on how to implement this? I would post my attempt, but it's become so cluttered its quite unreadable now.
After a few edits and help from those below. I have done this.
http://www.bootply.com/azFiegnAoO
But now there is a small problem, the width of the navbar set at 100% is wider than the page and extends a page a bit to the right.
set the width of the left and right part of the navbar to be equal and add margin: 0 auto to the css of the navbar
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.