Log in button on the right side of navbar
<nav class="navbar navbar-inverse">
Klokkebutikk
<ul class="nav navbar-nav">
<li>Herre</li>
<li>Dame</li>
<li>Barn</li>
<li>Logg inn</li>
</ul>
</nav>
Just add the link in another ul below and use the pull-right class
<nav class="navbar navbar-inverse">
Klokkebutikk
<ul class="nav navbar-nav">
<li>Herre</li>
<li>Dame</li>
<li>Barn</li>
</ul>
//add here
<ul class="pull-right nav navbar-nav">
<li>Logg inn</li>
</ul>
</nav>
Example here - http://www.bootply.com/NJ0UqYdKsh
Related
<!-- navbar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
MYSITE
<ul class="nav navbar-nav">
<li class="dropdown">
Tags <span class="caret"></span>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
<li>menu7</li>
<li>menu8</li>
<li>menu9</li>
<li>menu10</li>
<li>menu11</li>
<li>menu12</li>
<li>menu13</li>
<li>menu14</li>
<li>menu15</li>
<li>menu16</li>
<li>menu17</li>
<li>menu18</li>
<li>menu19</li>
</ul>
</li>
</ul>
</div>
</nav>
I am learning bootstrap and i am trying to create a layout through the same. My dropdown menu is not working and am not able to detect the fault. Please help!
Its working fine, You need to add jquery, Bootstrap ja, Bootstrap CSS` then if will work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- navbar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
MYSITE
<ul class="nav navbar-nav">
<li class="dropdown">
Tags <span class="caret"></span>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
<li>menu7</li>
<li>menu8</li>
<li>menu9</li>
<li>menu10</li>
<li>menu11</li>
<li>menu12</li>
<li>menu13</li>
<li>menu14</li>
<li>menu15</li>
<li>menu16</li>
<li>menu17</li>
<li>menu18</li>
<li>menu19</li>
</ul>
</li>
</ul>
</div>
</nav>
i followed the bootstrap way to build a navbar and a footer, but i am having some troubles with the navbar, i want to place an image that is my logo inside the navbar at the begining in the left, but the logo does not fit the column. I don't know why.
here is my code:
<header>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-left">
<img src="img/logo1.png" class="img img-responsive" alt="">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
Image:
i tried to add this css:
.navbar-brand
{
margin: 0;
padding: 0;
}
.navbar-brand img
{
max-height: 100%;
}
but then my image get to small, if i want to increase the size of the image the image stretch, i just want the image to maintain the size ratio, and fit the left side of the navbar, what is wrong here?
bootply
Put navbar-brand outside of navbar-nav
<header>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="img/logo1.png" class="img img-responsive" alt="">
</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
More Info
You can try this..
.navbar-brand
{
padding-left:20px;
z-index:999;
position:relative;
}
I'm new to bootstrap and in my application I want to have a navbar at the top of the page. The navbar should contain the brand name and then to the right of it it should have some options. But whenever I use navbar-right it doesn't work and the page I get looks like this
As you can see everything is squashed together with the brand name on the left hand side. What I have tried to fix this is by using pull-right which does work perfectly but I want to know why navbar-right isn't.
homeTemplate.html
<body>
<nav class="navbar navbar-default">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
MyApp
</div>
<ul class="nav navbar-nav navbar-right">
<li>Profile</li>
<li>Notifications</li>
<li>Messages</li>
<li>Options</li>
</ul>
</div>
</div>
</nav>
</body>
I think you might have missed some library.
See the given below snippet I have added
Jquery library
bootstrap.js and
bootstrap.css
Its working fine. see the below snippet
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
MyApp
</div>
<ul class="nav navbar-nav navbar-right">
<li>Profile</li>
<li>Notifications</li>
<li>Messages</li>
<li>Options</li>
</ul>
</div>
</div>
</nav>
There might be a version issue. For Bootstrap version 4, Use <ul class="nav navbar-nav ml-auto"> for moving element to the right.
Try using two Unordered-Lists, one for the nav-brand and the elements you require to be aligned left and then use separate unordered-lists with the "nav navbar-nav navbar-right" class to get the right aligned elements. Check the snippet below.
<nav class="navbar navbar-default navbar-static-top">
<div class="topnav">
<ul class = "nav navbar-nav">
<li><a class="navbar-brand bigbrand" href="{% url 'urls' %}">BRAND name</a></li>
<li><a class="navbar-link" href="{% url 'urls' %}">Home</a></li>
<li><a class = "navbar-link" href="urls">News</a></li>
<li><a class = "navbar-link" href="urls">Contact</a></li>
<li><a class = "navbar-link" href="{% url 'urls' %}">test</a></li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li>logout</li>
</ul>
</div>
</nav>
I am creating a navbar with Bootstrap, the problem is when I try to put two or more images in the right navigation bar, the height of the bar increases how can i fix it? Thanks!!
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.youtube.es/"><img src="IMAGENES/youtube.png"/></li>
<li><a href="http://www.twitter.es/"><img src="IMAGENES/twitter.png"/></li>
<li><a href="http://www.facebook.es/"><img src="IMAGENES/facebook.png"/></li>
</ul>
Try like this: Demo
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left"> <a class="navbar-brand" href="index.php">xxx</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><img src="IMAGENES/youtube.png"/>
</li>
<li><img src="IMAGENES/twitter.png"/>
</li>
<li><img src="IMAGENES/facebook.png"/>
</li>
</ul>
You didn't closed <a> tags .. Check all the tags were closed properly or not..
I am looking on how to position my top navigation on the top right.
So far I have this code:
<div id="navbar" class="navbar navbar-fixed-top ">
<ul class="nav navbar-nav">
<li>Contact Us</li>
<li>NL</li>
<li>ENG</li>
</ul>
</div>
But I am not sure how to position it on the top right.
Thanks.
The right way to do this according to bootstrap is using the class navbar-right. Have a look at this link on bootply.
Try the following:
<div id="navbar" class="navbar navbar-fixed-top">
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
<li>NL</li>
<li>ENG</li>
</ul>
</div>
Update. Made a mistake and placed navbar-right on the div instead of the ul. It's fixed now. Also included bootply link.