I am new to bootstrap and am trying to make simple menu/nav.
I am trying to make contents of the menu centered along with the brand. Also when I make the screen smaller the menu items move under the brand. How can I make it so that it doesn't? There seems to be enough space in the nav to not make the items move under.
Note: I have not written any CSS for this.
https://jsfiddle.net/b9smvjn0/
HTML:
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#account-options" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h4 class="navbar-brand">Image Box</h4>
</div><!--end navbar header-->
<!--togglable menu items-->
<div class="collapse navbar-collapse" id="account-options">
<ul class="nav navbar-nav">
<li>Upload Photo</li>
<li>Deactivate Account</li>
<li>Activate Account</li>
<li>Delete Account</li>
<li>Log Out</li>
</ul>
</div><!--end toggle-->
</div><!--end container-->
</div><!--end navigation-->
I think it's because your h4 element inside the navbar-header. It's adding an extra margin on top and bottom, this is why it doesn't align.
.navbar-header h4 {margin:0;}
I removed it in your fiddle and it's working.
https://jsfiddle.net/b9smvjn0/1/
Is this what you want?
Edit
Hopefully this is what you are looking for.
Note: This is using custom css, so if you plan to stick with pure bootstrap, you'll to do in another way.
I added a div around the brand and the navbar so, we can center both elements.
Also i reduced the amount of padding on the a tag inside the navbar. This is necessary because of the amount of menu items you have.
Then i just used the technique of text-align:center; margin:0 auto; on the container div. It's inside a media(min-width:768); because when it get smaller the layout change, so we get it back to original position.
This the updated fiddle: https://jsfiddle.net/b9smvjn0/3/
To remove the extra space, you can remove the margin for the <h4>. And for centering all the <nav> content, or keeping it on the straight line, use these:
white-space: nowrap;
overflow: hidden;
Fiddle: https://jsfiddle.net/oLmnjh3p/
Related
I have a private video site that's main aimed towards my home networks and the desktop computers, however, the site was constructed on a 1920x1080 resolution so if that's any smaller that site looks like a catastrophe. here is the code for the page.
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div style="width:66%" class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Network TV</li>
</ul>
</div>
</div>
</nav>
<div class="col-md-4 col-md-offset-3" style="width:100%; height=:100%; color:black; margin-top:13%; text-align:center; border: 0">
<div class="row center-row">
<div style="width:10%" class="col-md-4"><div style="background-color:transparetn" class="well"><p><u><h4>Season1</h4></u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season2<h4></u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season3</u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season4</h4></u></p></div></div>
<div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season5</h4></u></p></div></div>
</div>
</div>
What I want to know
My question is why does this not scale down properly, when the screen is smaller I want the margins to adjust to fix the screen, but instead it all just goes into a vertical list all mixed my and improperly scaled
If you are using bootstrap you have no need for all the extra inline styles, by setting inline widths to your html you are taking away what makes bootstrap "boostrap" for sizing, bootstrap has a grid system, if you follow the grid system, your site will work correctly. Please read: w3 fools has a great starting point for begginers. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Also, after looking at your code I noticed you have col-4 set to 10% width, it does not work like that. col-4, is more like 33% if you are using the most common 12 column grid. that means by setting col-4 to 10% you are over riding bootstrap key features and is why it is not working for you.
In your example the last div should be </nav> for one thing. Along with this style tag inside of the container > style="width:66%". I would start with those things first.
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Network TV</li>
</ul>
</div>
</div>
</div><!--CHANGE TO NAV-->
I'm trying to figure out how to change the background color of a bootstrap nav bar to match the background of the element, in this case the body tag, behind it. The effect I am wanting is similar to 'background-color:transparent' but I don't want it transparent; I want the page to flow behind it still as you scroll down. I also do not want it to inherit the parent background as it is a linear-gradient. What I am looking to do is set the background of the whole nav bar as the current color behind the nav bar on the parent element behind it.
Since that didn't come out very clear, I set up an example in jsfiddle: https://jsfiddle.net/y1Lev5o6/2/
Using bootstrap resources, here is the html on the fiddle
<body style="background-image:-webkit-linear-gradient(top,#023322,#ffffff); background-repeat:no-repeat; height:1000px;">
<div class="navbar navbar-inverse navbar-fixed-top" style="background-image:none; background-color:transparent;">
<div class=" container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="color:white;">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div style="background-color: white; height: 100px;margin-top:200px;">
I don't want to see white in my nav bar</div>
<footer style="padding-top:200px;">
<p style="color:white;">© my website</p>
</footer>
</div>
If you scroll down on the results of the fiddle I think it is obvious of what I am trying to accomplish, or in this case prevent. I want all my page elements to flow behind my nav bar, but want the nav bar to pick up the color directly behind it on the body tag.
With the help of a little javascript:
$(document).ready(function(){
$(window).scroll(function(e){
var scr = $(window).scrollTop();
$('.navbar').css('background-position', '0px -'+ scr+'px');
});
});
and CSS:
.navbar{
background-image:-webkit-linear-gradient(top,#023322,#ffffff);
background-repeat:no-repeat;
background-position:top;
background-size:auto 1000px;
}
See this updated fiddle
Essentially what's going on here is the .navbar gets the same gradient backgorund, and it's position is changed/moved with the window scrolling.
My code is save at http://jsfiddle.net/qba2xgh6/1/ , it comes from the Bootstrap official website.
Below is the code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Brand</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<p>
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.
Hello, the main content starts here.Hello, the main content starts here.
</p>
</div>
The problem is that when I clicked the dropdown button at the right upper corner, the dropdown menu appears and covers the main content. How can I avoid this? I would like it to push down the main content.
That's because you are using the class navbar-fixed-top that makes the navbar stay fixed -- out of the flow on the document. You can:
Remove that class. But it will delete the behavior on all devices and resolutions too.
If you want to keep that for all but not for mobile then add this media query:
#media (max-width:768px) {
.main {
margin-top:0;
}
.navbar-fixed-top {
position:static;
}
}
Check this DemoFiddle
Remove the class navbar-fixed-top from the outermost <div>
You are seeing the intended behaviour for the fixed navigation. If you remove the .navbar-fixed-top class on the navigation it removes the 'stickiness' of the navigation and it'll follow the content flow.
You can a sample at http://jsfiddle.net/qba2xgh6/4/ , I also removed the margin from the .main as it's not needed anymore.
I faced this issue when I first started using Bootstrap. When you use the class navbar-fixed-top the navbar will stay at the top of the page. Remove this and then it'll work as expected.
I am quite new on making a website with bootstrap.
My website has a fixed navbar
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
This is all going perfect in my browser. But when I resize the browser to a smaller size (instead of full size) the brandlogo is moving to much to the left and half of it dissapears on the leftside. The button (btn-navbar) is to much to the right, so its behind the scrollbar.
How can I fix this in the css? Do I need to add css to #media?
Take a look at this link: http://getbootstrap.com/examples/navbar-fixed-top/
This will help you fix your problem :-)
Hope this helps!
make sure you have all of your CSS and JS in place correctly...
I integrated twitter bootstrap navbar into my asp.net project. However, I'm trying to align my bootstrap text into the center. Here is my source code for my navbar
<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">iPolice</a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li>Home</li>
<li class="divider-vertical"></li>
<li>Login</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is the image of my bootstrap
Then i added this twitterbootstrap css inside to attempt and shift the ipolice, home, contact and login into the center
#twitterbootstrap {
position:absolute;
text-align:center;
}
which didnt work. I visited this link and tried but still wasn't able to do it. May i ask how do i align my text into the center?
Depending on where you want the Brand link to appear, here are two possiblities
http://jsfiddle.net/panchroma/cW9sA/
or
http://jsfiddle.net/panchroma/GWMnF/
EDIT: A third variation where the iPolice brand link is always centered, even at narrow viewports
http://jsfiddle.net/panchroma/F5x5Z/
Note that in the second example I've added a copy of the brand link into the main menu, and used the utility classes of .hidden-desktop and .visible-desktop to fine tune how this is displayed at different viewports
Important CSS is
#twitterbootstrap .navbar .nav,
#twitterbootstrap .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
#twitterbootstrap .navbar-inner {
text-align:center;
}
Some of this CSS is based on an answer from Andres Ilich
Good luck!