I've created a navigation bar with a simple contact button on the right hand side using twitter bootstrap v3.
However when the screen size is < 768px it drops outside of the navigation bar.
This is the section with the problem.
<div class="pull-right">
<ul class="nav">
<li id="myContactButton" class="nav-text alternate">Contact Us</li>
</ul>
</div>
http://jsfiddle.net/x9NBC/
I've had a look through the #media queries in the css but I can't figure out which is making it drop down like that.
How can I make it stay in line with the navigation?
Add these Sections
I have added pull-left class to some of the element, mentioning below
<div class="navbar-header pull-left">
Pull left for button
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse">
Add pull-left for anchor tag also
<a href="index.php" class="pull-left">
Here is the Demo http://jsfiddle.net/x9NBC/6/
Related
I have a bootstrap 4 navbar like this:
<nav class="navbar navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Toggle Button -->
<button type="button" class="navbar-toggler hidden-md-up"
data-toggle="collapse"
data-target="#nav-content"
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>
<a class="navbar-brand" href="#">THE VEGAN REPOSITORY</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-md" id="nav-content">
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#home_page_footer">
<h5 class=" nav-item clickable white-text medium-text
right-text">
ABOUT
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#home_page_footer">
<h5 class=" nav-item clickable white-text medium-text
right-text">
BLOG
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.w3schools.com">
<h5 class=" nav-item clickable white-text medium-text
right-text">
LOGIN
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.w3schools.com">
<h5 id=" sign-in-button" class="nav-item clickable
medium-text right-text">
SIGN UP FREE
</h5>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-light bg-faded">
<!-- Toggle Button -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
</button>
</nav>
I'd like to change the height of the navbar, but when I do, the links are no longer vertically centred.
70px
I have tried line-height, and flexbox options such as
nav {
background-color: $brand-red;
height:70px;
display: flex;
align-items: center;
}
which does:
my only css used for the whole navbar is this:
nav {
background-color: #fc4747;
height: 70px;
display: flex;
align-items: center; }
How do I vertically centre the navbar items if the navbar is 70px tall? The default height of a navbar is a bit smaller, around 50px.
So I figured I would address a few things here but first as to your question. If you just want to change the height of the navbar instead of adding a specific height to the nav you could just add extra padding to the navbar to give you your desired height and then you wouldn't have to change a bunch of css throughout the rest of the navbar. So doing this should give the navbar a height of 70px.
.navbar{padding:1rem}
Here is a fiddle of everything I address in this post in action Fiddle Demo
In this fiddle demo I have also added some responsive styles for stacking the navbar links at your collapse width.
Next If you are going to set a background color to the nav there is no reason to use the bg-faded class to the nav as this just gives you the background color for the nav so you can remove that class from your nav.
Then I see in your classes for your nav links you have a white-text class. If you want white text for your navbar your can just use the class of navbar-dark and this will give you lighter text for the navbar instead of using navbar-light. Just figured I would point that out.
Next In bootstrap 4 there is no navbar-header class so this is not necessary unless you are planning on custom styling something here. And the navbar-toggler button is different in bootstrap 4 there are no icon-bar spans they just use the html code for this now ☰
Note: Addressing a huge pet peeve of mine you have h5 tags in your navbar. Not sure why this is but I see people doing this a lot. H tags are supposed to be used in order from h1 down to h6 and are supposed to be directly related to the page that you are on and not for the entire site. If you have a good reason for this practice then by all means keep them there but I am not sure why I see people do this all of the time. To me it is a bad practice just figured I would address this.
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 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.
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>