I am trying to use the Boostrap 3 grid system. I have a navigation header that i'm trying to customize in the regular desktop screen resolution. The columns work fine until I size the screen down to about 1200px wide. Then the left two links - a button and a regular link start stacking. I don't know how to resolve this. When I change the column sizes the middle column menu links start stacking which I don't want either. I feel like I am missing something really basic here. And I am a newbie in advance so my apologies for lack of knowledge in certain areas.
The live link is here:
http://www.splashdesignstudios.com/template/template3.html
You can use the navbar bootstrap and the collapse plugin.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">
<img alt="Brand" src="img/mocklogo.png" style="height: 100%;">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link1 <span class="sr-only">(current)</span></li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
</ul>
<form class="navbar-form navbar-right">
<span class="fa fa-sign-in"></span>Login
<button type="submit" class="btn btn-custom"><span class="fa fa-search"> </span>Sign Up</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can change the appearance just by changing the bootstrap-css. You can find some themes at the bootswatch.
Check this link to see how it's working. In this example, I'm using the Paper theme.
Hope it's useful!
Specifying fixed width classes to three columns gives less width to last column once your screen size reduces. I would divide the header into two columns (both with display: table-cell and vertical-align: middle) with first one containing the logo and menu and second one containing the buttons. However, to make it act properly under 1200px, you will need to use media queries and adjust the styles for every element accordingle.
Related
I am working with bootstrap, and I have for example this code snippet :
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Symptoms
<li class="divider-vertical"></li>
</li>
<li>
Services
<li class="divider-vertical"></li>
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I can see the navbar, navbar-inverse, navbar-fixed-top, container, navbar-header, navbar-toggle, sr-only, icon-bar,navbar-brand, collapse, navbar-collapse, nav navbar-nav, etc...
So - Lets say I want to align the list in this code to the center. Which class, of the 12+ classes, do I have to modify with text-align? Is there a way of "backtracking" through the divs to see which one to change? The class that directly contains the list is nav navbar-nav, but if I change :
.navbar-nav > li > a
to include text-align:center; , nothing happens. Which must mean that I changed the wrong class.
If you know a way of determining which class to change, I appreciate it!
Thank you.
As rsn said in a comment, the best way is to install a developer tool that comes with the browsers. I personally like the Chrome one but the Firefox one works well too. You can select an individual item on your page using the select icon (arrow pointing to a box) and see what styles are attached to it. If you're trying to change padding, look at which element on your page has the padding, and then change that class.
Add an Id to the one you want to edit. Id overrules classes making the site then use the styling of the id instead of the class.
Or edit starting with .navbar and add classes after that...
Eg: .navbar{...} or .navbar .navbar-header .navbar-brand{...}
If you want the sub-menu (symptoms, services, contact) center aligned you can just use Bootstrap's text-center helper class on the UL as follows:
<ul class="nav navbar-nav text-center">
Here is the MarkUp:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Kellumonline
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</li>
<li><a href="tech/index.html">Tech</li>
<li>Gaming</li>
<li>Skate</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Website where the code is currently published on
I have no CSS styling any of the containers or elements. I seriously have like 3 styles:
one is pulling a font from Google,
the second is specifying a width and height for my jumbotron,
the third is specifying the margin for my 3 columns at the bottom of
my home page.
I am working on my website and need some help figuring out why my navbar links are spaced the way they are.
Also, my contact page is not displaying correctly and it has the same code in it as the other pages.
Any help, feedback or constructive criticism is much appreciated.
Thanks
It's very stupid...
The navbar in your contact page has this following class:
class="navbar navbar-incerse navbar-static"
So
Change incerse by inverse
Looking at it, I can see the the Home link and the Tech link don't have their closing </a> tags. Add those in and that should sort it out.
Also, #yenne-info has the correct answer to your Contact page issue.
Having CSS/HTML issues with Bootstrap. For some reason it seems the navigation is not pushing down the aspects of the HTML that follows. See https://jsfiddle.net/xaazf6u2/
<div id="topNavigation">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">BCF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">History <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>FGT</li>
<li>BB</li>
</ul>
</li>
</ul>
<ul id="login" class="nav navbar-nav navbar-right"></ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="pageContent" class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<p>Use the form below to upload an order feed. Once uploaded, FedEx shipping will be purchased, labels and packing slip generated for us. Use the navigation above to access previously generated files.</p>
</div>
</div>
From the examples you can see that the jumbotron should have some space below the navigation http://getbootstrap.com/examples/theme/
When you used the fixed navbar Bootstrap recommends you add padding to your body to prevent this problem. So in your CSS you need to add
body { padding-top: 70px; }
The navbar is position:fixed so that it stays on the screen as you scroll. Elements with fixed position don't affect layout of other elements, so you'll need to manually set margin or padding on them.
See the Bootstrap documentation for notes on this.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Copy
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
The class "navbar-fixed-top" means that the content is scrollable and goes under the navbar.
Add a margin-top to the content if you want to keep this feature or remove the "navbar-fixed-top" class if you don't.
Navigation bar is fixed to the top by default you can change that by removing the class 'navbar-fixed-top'.
I'm just getting started with Bootstrap, and am doing so by designed a page for myself from scratch. I'm still stuck on the navbar as of now.
Here's how I want it to work: On desktop/tablets, it should work just like conventional navbars, with one header element on the left and a list of option on the right. On mobile, however, instead of having the navbar collapse into a menu, I want it - all of it - to just move to another row within the navbar.
I tried making the class of the part I want to overflow to "sidebar", but the list still renders vertically, like with the collapse menu.
A friend of mine has implemented this on his site at "thepickletheory .com" (Can't add a direct link for lack of reputation), and it works really well there. He's just used a WordPress theme, however, and the code isn't in Bootstrap too, so I can't implement it myself either.
Here are some pictures that show what I'm trying to accomplish.
Navbar in desktop/tablet view
[Name] --- [Item 1] [Item 2]
Navbar in mobile view
[Name]
[Item 1] [Item 2]
Here's the code for the navbar that I've written so far, which moves the second part of the navbar to another row, but renders the list vertically (links are dummies for now):
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Harshil Shah</a>
</div>
<div class="sidebar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Twitter</li>
<li>Blog</li>
<li>Archive</li>
</ul>
</div>
</div>
</div>
Would really appreciate some help with getting this to work. Thanks!
EDIT 2:
Through some rather fortunate trial-and-error, I've stumbled upon the solution: the unordered list just has to be assigned to the .nav-pills class, and that's all it takes.
You has to specify navbar-collapse collapse here is used to enable the toggle menu in Small screens instead of showing full menu just look here
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Harshil Shah</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="sidebar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Twitter</li>
<li>Blog</li>
<li>Archive</li>
</ul>
</div>
</div>
</div>
</div>
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap don't mind which is binded in bootstrap.js. here the source
Instead of collapse you can use bootstrap grid classes source
<div class="navbar-header col-xs-12 col-md-4">
</div>
<div class="col-xs-12 col-md-8">
<!-- here side bar menu -->
</div>
which will bind accordingly by device you are using. put col size as your need.
I'm using twitter bootstrap and I see the image below when I reduce the width of the browser window to a certain size. However, when I click on it and nothing happens. I normally have 2 elements there but can't see them when I width is too small. How do I fix this by either removing the button from showing or have the button show but then show the 2 items on click?
To stop the button from displaying, you may add below code to your css:
.navbar .btn-navbar{
display:none;
}
Additionally , you may go through this article for more information and help..
Make sure you have responsive bootstrap css and the collapse javascript plugin per the bootstrap documentation:
Heads up! The responsive navbar requires the collapse plugin and
responsive Bootstrap CSS file.
Also here is an example of it working (has bootstrap responsive css and bootstrap js referenced):
http://jsfiddle.net/ZdVcg/
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home
</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
</div>