I have a website setup using bootstrap and have the navbar done to my liking. Now I have to work on my container. I wanted something like this image here (http://awesomescreenshot.com/0d61zypfff). The main container overlaps the navbar a little bit. I have used these classes for my navbar and have laid out what I think would be the ideal layout of the code..
<div class="navbar navbar-inverse navbar-static-top" role="navigation"></div>
<div class="container"> //Please do not add any styling to the container
<div class="index"> //background: #ffffff;
This text overlaps the menubar
</div>
</div>
I have added extra padding-bottom to the navbar to make the navbar a little more "buff" and want my index section to overlap it.
Please let me know if I need to add more information.
To add onto #isherwood, you must also set the z-index: -1;. This will make it so that the index div will overlap the navbar.
A little negative margin should do it:
navbar {margin-bottom: -20px;}
Or:
.index {margin-top: -20px;}
Related
I ran rails generate scaffold pins description:string. The header covers pins as below. I don't know how to fix this. I tried some with css but didn't work. Does anyone know solutions for this?
You could try applying margin-top to the content of the page. The margin should be the same height as the header or greater.
I assume you are using a bootstrap navbar - you need to add padding to avoid the overlap - from navbar docs
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
I am having trouble achieving the following. I would like to remove the white background color above my nav bar on the following page. http://www.balfourautobody.com/
This way the logo will sit on the brick instead of on white background.
I have been playing around with it but can not seem to figure it out.
I understand that is probably a pretty simple question but I am stuck.
Any help would be much appreciated
The white background belongs to the wrapper element (#wrapper). You would also have to remove the box shadow.
Be aware that doing this will remove your content background as well so you'll have to add another in.
Move your div with id="logo" before div with id="wrapper":
<body>
<div id="logo">
...
</div>
<div id="wrapper">
...
</div>
...
</body>
To remove white space above navbar, add to styles something like this:
#contact-details {
margin: 10px;
}
#header {
min-height: 10px;
}
I am facing with a problem that my top menu overlaps the body. When actually menu must be placed above body.
I've already tried display: block; but it didn't help
Can you look trough it please ?
Here my Demo
Okay, try this. Give the menu div
style="display:table;"
and hope it will solve your issue. Before it doesnot assume any space for div itself, but only for the content and the main div occupies the space right from the top.
Here is the fiddle. I have given there inline css. But I suggest to define a class for menu and put the css in there.
Have you created a container div for the entire page? And then have a background div and a separate menu div?
<div id="page_container">
<div id="background"> Background code
<div id="menu">Menu code
</div>
<div id="body_content">Content in body code
</div>
</div>
</div>
Im trying to get a fixed width side bar with a responsive main div when using bootstrap 2.3.2.
Something like this image below
Ived tried to use a 200px fixed width div and then place a fluid div next to it, but couldnt get it to work. Any ideas ? ive made a js fiddle of the problem here - http://jsfiddle.net/KAfMB/1/
This is because your "fixed-span" class is being overridden by the bootstrap span classes.
You can solve this removing the word "span" from your class:
<div class="row-fluid">
<div class="fixed blue cols">...</div>
<div class="span8 red cols">...</div>
</div>
.fixed {
width:200px;
float: left;
}
Here's the fiddle:
http://jsfiddle.net/KAfMB/4/
In Twitter bootstrap's starter-template.html, the navbar is written as
<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
However, if I change the markup to
<div class="navbar navbar-inner">
<div class="container">
...
</div>
</div>
everything seems to work fine and there's no discernible visual differences as far as I can tell. What's the reason to have separate navbar and navbar-inner classes associated with two divs? Why not just have a navbar class that combines styles of both?
It makes the stucture of your html document more clear and readable. The .navbar class sets the position (and has a default display inline) while the navbar-inner class wraps the content of this container (display table).
Your .navbar can contain more as one blocks like navbar-inner.
In your hierarchical DOM-structure .navbar has the same level as the .container(fluid) divs:
This is way old but I had the same question recently. I think the purpose is cosmetic.
I've noticed that .navbar-inner has a linear gradient background. With multiple rows of .navbar-inner, each nav row is more clearly defined for the end user.
For each type of navbar style, .navbar-inner has different means of visually delineating it's content.