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
Related
I'm using bootstrap to create a webpage. The problem is that I have a horizontal navbar a main tag and a footer. When I resize the screen, the navbar main and footer do not align, the navbar is wider than the main content, and the footer is more inside. To partially fix this I modify the style of each element, but when the navbar adjusts itself, it becomes wider than other elements in the HTML. Is there a global way to make everything align?
Its because you didn't include the collapse class of bootstrap which help to resize the navigation bar when screen is resized.Better to use a button which on clicking shows other tags in your navigation bar which is by the way vertical for small screens.
Also please share your code so you can be helped better.
Im trying to add my logo to my bootstrap 3 navigation. My goal is to achieve this:
MY NAV WITH LOGO
It shouldn't be centered and SHOULD be bigger than navigation panel (like in picture). I know that there are many soutions for those problems, but I've tried many of them and effect was poor.
Can anybody help me with this?
If it's necessary I can post any CSS or HTML code.
Thanks.
Edit: I did it, by using proper media queries nad manually positioned logo with margin.
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 have some problems with a project and am on a thight deadline.
The problem:
For a webproject the header consists of a full-width background slider and a menu containing the logo and menu items see: (http://d.pr/i/ln6N)
The problem I have is the way it is divided, the red part acts as a slider. The logo has some space between the menu bar.
How would I go about the transparant space arround this logo?
What I have now is a 100% width div containing the list items and logo on top of it.
I can't figure out how to get the white space on the left and right of the logo while the menu bar is 100% width.
I hope the image (above) clarifies some as I just don't know how to handle this one.
Thanks in Advance,
- V
I got it fixed, dirty tho..
In the image the gray area is one big image with the center cut out so i can place the logo en menu in it so there is some transparant space left.
What I want is sticky footer with 100% width (or footer that stretches horizontally along with opened website), and I want to set a color for it. But when I scroll page I don't want the footer to be stuck at the bottom, I want it to scroll away with page when I scroll it.
Then above the footer I want a 3 (right, left and center-content) column centered layout that has a header and also horizontal navigation bar area. Then outside this layout I could set background a color and also background image that is attached to top.
Is this possible at all? I followed Ryans Faits method but wasn't sure exactly how to put this all together.
Can anyone help me with css and html code? I appreciate your help!
Looks like you're looking for something like this: http://matthewjamestaylor.com/blog/perfect-3-column.htm