I'm stuck on formatting a Bootstrap Nav Bar. I want a navigation that has one link (logout) on the right side and the remaining three links and header on the left. The problem is I can't get them to line up so they are all inline.
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
LHV TalentTracker
</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">
{% if request.path == "/candidates/" %}
<li>
<a class="candidate-nav-links" href="/candidates/">Candidates</a>
</li>
<li>
<a class="candidate-nav-links" href="/candidates/?role=technical">Product</a>
</li>
<li>
<a class="candidate-nav-links" href="/candidates/?role=business">Business</a>
</li>
</ul>
</div>
<span class="navbar-text navbar-right">{{ session["company_email"] }} Logout</span>
{% endif %}
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Related
I have a simple static HTML site with a header.html file I'd like to reuse on each of the pages. I followed the suggestion from how to load header and footer before the content using jquery.load() which appeared to work but caused the drop-down on hover no longer function (must be clicked). The top is the navbar using jQuery.load, the bottom is identical code placed inline within my index.html. My css and js files are all included in my index.html file, not in the header.html file. Any thoughts on why this is occurring?
In my header, I have the code below:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
..and to include the header/footer I have:
<div id="header"></div>
Contents of my current header.html file:
<section class="header-uper">
<div class="container clearfix">
<div class="logo">
<figure>
<a href="index.html">
<img src="images/logo.png" alt="" width="250em">
</a>
</figure>
</div>
<div class="right-side header-padding">
<ul class="contact-info">
<li class="item">
<div class="icon-box">
<i class="fa fa-envelope-o spacer"></i>
</div>
<strong>Email</strong>
<br>
<a href="#">
<span>customer email</span>
</a>
</li>
<li class="item">
<div class="icon-box">
<i class="fa fa-phone spacer"></i>
</div>
<strong>Call Now</strong>
<br>
<span>customer #</span>
</li>
</ul>
</div>
</div>
</section>
<header class="navbar navbar-default">
<div class="container">
<div class="HeaderRow">
<div class="col-md-12">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- ================ -->
<div class="main-navigation animated">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar">
<li class="active">Home</li>
<li class="dropdown">
Our Practice <span class="caret"></span>
<ul class="dropdown-menu">
<li>About Dr. Eaton</li>
<li>Staff</li>
<li>Our Office</li>
<li>Services</li>
</ul>
</li>
<li class="dropdown">
Education <span class="caret"></span>
<ul class="dropdown-menu">
<li>Eye Education</li>
<li>Covid 19 Safety Plan</li>
</ul>
</li>
<li>Optical</li>
<li>Insurances</li>
<li>Forms & Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
Reposting as an answer for that lucrative reputation...
You state that you are loading content into here:
<div id="header"></div>
It sounds like this is adding a new element into the DOM, which may break your CSS selector specifications if you're not ready for a div#header to appear in the middle of them. I'd look here first.
The other issue is that the DOM is going to be ready and the <header> will not have been loaded yet. You're then using jQuery to load new elements into the DOM, and those elements may still need to be initialized once the DOM has finished loading the new HTML.
I would like that my navbar is floating right. I tried to set the <ul class="nav navbar-nav float="right", but the navbar is still centered. I am quite sure that the float should be on this tag? I also tried with text-align:right;, which did not work either.
Is there something I am missing here?
HTML
<!-- page wrapper start -->
<!-- ================ -->
<div class="page-wrapper">
<!-- header-container start -->
<div class="header-container">
<!-- header start -->
<!-- classes: -->
<!-- "fixed": enables fixed navigation mode (sticky menu) e.g. class="header fixed clearfix" -->
<!-- "dark": dark version of header e.g. class="header dark clearfix" -->
<!-- "full-width": mandatory class for the full-width menu layout -->
<!-- "centered": mandatory class for the centered logo layout -->
<!-- ================ -->
<header class="header fixed clearfix">
<div class="container">
<div class="row">
<div class="col-md-3 ">
<!-- header-left start -->
<!-- ================ -->
<div class="header-left clearfix">
<!-- header dropdown buttons -->
<div class="header-dropdown-buttons visible-xs">
<div class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button>
<ul class="dropdown-menu dropdown-menu-right dropdown-animation">
<li>
<form role="search" class="search-box margin-clear">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Search">
<i class="icon-search form-control-feedback"></i>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- header dropdown buttons end-->
<!-- logo -->
<div id="logo" class="logo">
<img id="logo_img" src="http://<?php echo $_SERVER['HTTP_HOST'] ?>/images/graphics/logo.png" >
</div>
</div>
<!-- header-left end -->
</div>
<div class="col-md-9">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- classes: -->
<!-- "onclick": Makes the dropdowns open on click, this the default bootstrap behavior e.g. class="main-navigation onclick" -->
<!-- "animated": Enables animations on dropdowns opening e.g. class="main-navigation animated" -->
<!-- "with-dropdown-buttons": Mandatory class that adds extra space, to the main navigation, for the search and cart dropdowns -->
<!-- ================ -->
<div class="main-navigation animated with-dropdown-buttons">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav" float="right">
<!-- mega-menu start -->
<li class="mega-menu">
Hjem
</li>
<!-- mega-menu end -->
<!-- mega-menu start -->
<li class="dropdown mega-menu">
Kompetencer
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">
<div class="row">
<div class="col-sm-4">
<h4 class="title">UX/UI</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>UX/UI</li>
<li ><i class="fa fa-angle-right"></i>Prototyping</li>
<li ><i class="fa fa-angle-right"></i>Web Design</li>
<li ><i class="fa fa-angle-right"></i>Grafisk Design</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Webudvikling</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>Webudvikling</li>
<li ><i class="fa fa-angle-right"></i>PHP & MySQL databaser</li>
<li ><i class="fa fa-angle-right"></i>Wordpress</li>
<li ><i class="fa fa-angle-right"></i>Umbraco</li>
<li ><i class="fa fa-angle-right"></i>Joomla</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Marketing Automation</h4>
<div class="divider"></div>
<ul class="menu">
<li ><i class="fa fa-angle-right"></i>Mautic</li>
<li ><i class="fa fa-angle-right"></i>Landesider</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 hidden-sm">
<h4 class="title">Oversigt over kompetencer</h4>
<p class="mb-10"><u>En oversigt over alle mine kompetencer</u></p>
<img src="http://<?php echo $_SERVER['HTTP_HOST']?>/images/graphics/kompetencer.png" alt="The Project">
</div>
</div>
</li>
</ul>
</li>
<li class="mega-menu">
Portfolio
</li>
<!-- mega-menu end -->
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil</a>
<ul class="dropdown-menu">
<li>Uddannelse</li>
<li >Erhvervserfaring</li>
<li >Personlighed</li>
</ul>
</li>
<li class="mega-menu">
Artikler
</li>
<!-- mega-menu start -->
<!-- mega-menu start -->
<li class="mega-menu">
Kontakt
</li>
</ul>
<!-- main-menu end -->
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
<!-- header end -->
</div>
<!-- header-container end -->
There are few reasons it is positioned to the left. You need to target the container that the nav is in first. It has a padding to the right. Remove this:
.with-dropdown-buttons .navbar-default .navbar-collapse {
padding-right: 0;
}
Then you can float the navbar to the right, but you'll need to be specific about screen widths.
#media (min-width: 768px) {
.navbar-nav {
float: right;
}
}
This works for me when I make these changes in the developer tools. If it doesn't work you will need to check if it correctly overriding bootstrap CSS, or you can use !important.
EDIT
You might also want to remove the padding on the last menu item, to make it flush with the edge of your container. You can try:
.navbar-default .navbar-nav > li:last-child > a {
padding-right: 0;
}
float is a CSS attribute. You may use it this way:
<ul class="nav navbar-nav" style="float: right;">
...
</ul>
Note that UL is a block tag and covers all the width. So, if you want it to fill less that all of the window's width, you should set the width attribute for it as well.
<ul class="nav navbar-nav" style="float: right; width: 800px;">
...
</ul>
I'm using Pico CMS. Here is the navigation code
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseID">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Broadstone Services</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="collapseID">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Solutions
</li>
<li>
Contact
</li>
<li>
Blog
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
When my page is full screen, the menu items look great. However, when the page window is made a lot smaller (or on mobile) the menu doesn't expand.
You are not loading the jQuery and Bootstrap JavaScript libraries that perform the functional uncollapse.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
See http://getbootstrap.com/getting-started/
For functional reference see: https://github.com/twbs/bootstrap/blob/master/dist/js/bootstrap.js#L557
I would like to have a Navbar in Bootstrap that looks like
+---------------------------------------------------+
| press | login | ... | <-second nav with smaller
+---------------------------------------------------+ height, text, ...
| LO | | | | |
| GO | HOME | FOO | BAR | | <-main menu with normal
+---------------------------------------------------+ height and text
Is there something like navbar-small in Bootstrap? Has someone any other hints how to do this with Bootstrap?
Here is my HTML markup:
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div id="second-nav" class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>press</li>
<li>login</li>
<li>...</li>
</ul>
</div>
<!-- /.container-fluid -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME<span class="sr-only">(current)</span></li>
<li>FOO</li>
<li>BAR</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I want to have #second-nav smaller.
In your top navbar, the padding on the anchor elements is increasing the height. You can remove it using the following code. Output in Full screen.
#media (min-width: 768px) {
#second-nav li a {
padding: 0 15px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div id="second-nav" class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>press
</li>
<li>login
</li>
<li>...
</li>
</ul>
</div>
<!-- /.container-fluid -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Beratungsansatz<span class="sr-only">(current)</span>
</li>
<li>HOME
</li>
<li>FOO
</li>
<li>BAR
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Here is what I have in one of my application to adjust both the size of the font and the height of the navbar
.navbar-nav {
font-size: 15px;
line-height: 1.428;
}
You can adjust depending on what you mean by "small" and "normal"
Depending on how you structured the nav bar in your template/views you just call the class in the appropriate tag. This is an example with a ul list tag
<ul class="nav navbar-nav">
<!-- your links -->
</ul>
This is what you need dude
#second-nav li a {
padding: 0 15px;
}
#second-nav ul li {
display: inline;
list-style: none;
float: left;
}
div#second-nav {
float: right;
}
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div id="second-nav" class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>press
</li>
<li>login
</li>
<li>...
</li>
</ul>
</div>
<!-- /.container-fluid -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Beratungsansatz<span class="sr-only">(current)</span>
</li>
<li>HOME
</li>
<li>FOO
</li>
<li>BAR
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
DEMO
I know you have an answer but this might be helpful anyways and takes the mobile viewport into consideration.
.navbar-default.nav-top ul {
display: inline-block;
float: right;
}
.navbar-default ul.navbar-top li {
float: left;
font-size: 11px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar-default nav-top">
<div class="container-fluid">
<ul class="nav navbar-top">
<li>press
</li>
<li>login
</li>
<li>.....
</li>
</ul>
</div>
</nav>
<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" 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="#">
<img src="http://placehold.it/50x25/f00/f00">
</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">Home <span class="sr-only">(current)</span>
</li>
<li>Foo
</li>
<li>Bar
</li>
</ul>
</div>
</div>
</nav>
In my bootstrap 3 navbar, the elements other than the brand which is on the left are floated to the right using the "pull-right" bootstrap class. In the mobile version, when they are dropped down with the toggle button, they remain floated to the right which looks very ugly. How can I change it so they are either floated left or centered when in the mobile view? Thanks in advance for any help
<div class="container" id="main">
<div class="navbar navbar-fixed-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" ><img src="images/logo.png" alt="logo"></a>
<div class="nav-collapse collapse navbar-responsive-collapse navbar-right">
<ul class="nav navbar-nav">
<li> Our Mission<li>
<li> What We Do <li>
<li> About Us<li>
</ul> <!-- end nav ul -->
</div> <!-- end nav collapse -->
</div><!-- end nav container -->
</div><!-- end navbar -->
Did you try to define the button as a pull-left instead of pull-right? Maybe that suits to you.
instade of using pull-right ..use navbar-right and lets see if it works.. it should work ;)
Update:
Use this
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li> Our Mission<li>
<li> What We Do <li>
<li> About Us<li>
</ul> <!-- end nav ul -->
</div>