I used toggle navbar as menu in my website for all devices. When I use this code it does not showing the 3 icon for collapsible nav bar. Please anyone find the errors in my code
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="srch">
<form method="post" class="col-md-7">
<input type="text" name="search" placeholder=" SEARCH" id="srch">
</form>
</div>
</div>
<div class="col-md-4">
<img src="image/logo.jpg" width="250" height="74">
</div>
<div class="col-md-4">
<button type="button" class="navbar-toggle x collapsed line" data-toggle="collapse" data-target="#navbar-collapse-x">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
You may try this bellow example according your requirement
.navbar-toggle {
border: none;
background: transparent !important;
&:hover {
background: transparent !important;
}
.icon-bar {
width: 22px;
transition: all 0.2s;
}
.top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.middle-bar {
opacity: 0;
}
.bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
&.collapsed {
.top-bar {
transform: rotate(0);
}
.middle-bar {
opacity: 1;
}
.bottom-bar {
transform: rotate(0);
}
}
}
<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.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<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 top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
for collapsible nav bar use this instead :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
change the screen size to see the effect.
https://jsfiddle.net/43rm9emw/
Related
If I have a Bootstrap3 navbar like in the snippet below, how can I prevent items from collapsing with the rest of the menu items when the viewport shrinks, while maintaining their styling?
In the example, Text and Link 1 menu items don't collapse, but they screw up the menu.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<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="#">Brand</a>
<ul class="nav navbar-nav">
<li><p class="navbar-text" href="#">Text </p></li>
<li>Link 1</li>
</ul>
</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>Link 2</li>
<li>Link 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link4</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Just added a class 'navbar-nav--static-left' to the left nav and applied some styles on it. Hope it will help you. Please check.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<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="#">Brand</a>
<ul class="nav navbar-nav navbar-nav--static-left">
<li>
<p class="navbar-text" href="#">Text </p>
</li>
<li>Link 1</li>
</ul>
</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>Link 2</li>
<li>Link 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link4</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<style>
.navbar-nav--static-left {
float: left;
width: auto;
}
.navbar-nav--static-left>li {
float: left;
position: relative;
}
#media (max-width:767px) {
.navbar-nav--static-left .navbar-text {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
}
</style>
I am currently in a situation where I have a header like so
<header class="container nav-container">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button 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>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
So it is essentially an empty header with nothing displayed. Instead, for larger screens, the main navigation is actually displayed in the footer
<footer class="footer container">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2/a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
At the moment, when I go down to mobile size, it displays the mobile nav button in the header as it should do. However, when you click on it, it expands the menu in the footer. Is there any way I can put the menu I am using in the footer to display in the header when on mobile size?
Thanks
If you don't mind duplicating the footer html in the header you can do the following (I have a visible header Nav bar in the demo, but I assume you will tweak that):
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="container hidden-after-768">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
<footer class="footer container hidden-before-767">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">>Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
With the CSS:
#media (min-width: 768px)
{
.hidden-after-768
{
display: none;
}
}
#media (max-width: 767px)
{
.hidden-before-767
{
display: none;
}
}
Here's a demo: http://www.bootply.com/render/4NgDES9hYq
(editable version http://www.bootply.com/4NgDES9hYq)
Note that theoretically you should just be able to do <footer class="hidden-xs hidden-sm">, and <div class="hidden-md hidden-lg"> for the header section, but I found there was a point between around 768 and 994 pixels where it showed neither the footer menu nor the hamburger button, so we were left with a dead spot with no navigation links whatsoever. That is why I created the extra #media classes.
you can do this:
<header id="header_wrapper">
<div class="container2">
<div class="header_box">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</spaenter code heren>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="main-nav" class="collapse navbar-collapse navStyle">
<ul class="nav navbar-nav" id="mainNav">
<li>></li>
<li></li>
<li></li>
<li>Logout</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
$(document).ready(function(){
if($(window).width() <= 375){
$('#navbar2').html($('#navbar').html())
$('#navbar').html('')
}
else
{
if($('#navbar2').length>1){
$('#navbar').html($('#navbar2').html())
$('#navbar2').html('')
}
}});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header class="container nav-container">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar2" 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>
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar2"></div>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
<footer class="footer container">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
You can use a jquery script to move the footer menu to the header menu in mobile view.
I created a temp div in header and adding the footer menu to that div and assigning the toggle menu to that div
You can do this purely with bootstrap 'hidden-X' classes:
https://getbootstrap.com/css/#responsive-utilities
I have made a codepen with an example of a duplicated menu that hides depending on the classes you give it:
https://codepen.io/c0un7z3r0/pen/NjrPvR
The magic works as follows:
Top menu container:
<div class="navbar navbar-inverse navbar-fixed-top hidden-lg" role="navigation">
Bottom menu container:
<div class="navbar navbar-inverse navbar-fixed-bottom hidden-md hidden-sm hidden-xs" role="navigation">
note the hidden-X classes, these determine what circumstances each menu should be shown. I hope this helps!
You could also display your navigation with position: absolute or position: fixed. Just as a quick example :
.navigation {
position: absolute; // in your header
top: 0;
left: 0;
#media screen and (min-width: 40em) {
position: static; // in your footer
}
}
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-brand pull-left">
<a href="#" class="pull-left">
<img width="150" height="45" class="navbar-left" src="Intellicell_files/IntelliCell-Logo.png" /></a>
</div>
<button class="navbar-toggle pull-right" 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 pull-right">
<ul class="nav navbar-nav navbar-right navbar-text">
<li><a id="homeLink" href="#" data-target="home_container">Home</a></li>
<li><a id="contractslink" href="Contracts.aspx">Contracts</a></li>
<li><a id="accounts" href="AccountHistory.aspx">Account History</a></li>
<li>Contact Us</li>
<li><a id="refer" href="#">Refer a Friend</a></li>
<li><a id="tracker" href="#">Incentive Tracker</a></li>
</ul>
</div>
</div>
<div class="center-block" id="divider">
<div class="nav-divider">
<h4 class="text-center">HOME</h4>
<%--<asp:Button Text="Logout" CssClass="btn btn-group-sm form-control" ID="btnLogOut" runat="server" align="right" OnClick="btnLogOut_Click"/>--%>
</div>
</div>
</div>
the problem comes when I test the Navbar on a tablet and that causes the navbar to go under the logo that i have put there, so i was wondering if there is a way of making sure that the nav logo and the nav options are always on the same line. i am using bootstrap by the way
One option is to reduce the padding between your links.
Also, see the Docs regarding how to structure a default navbar.
.navbar .navbar-brand {
padding-top: 3px;
}
#media (min-width: 768px) {
.navbar .navbar-nav > li > a {
padding-left: 8px;
padding-right: 8px;
}
}
<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 navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img width="150" height="45" src="http://placehold.it/150x45/f00" />
</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a id="homeLink" href="#" data-target="home_container">Home</a>
</li>
<li><a id="contractslink" href="Contracts.aspx">Contracts</a>
</li>
<li><a id="accounts" href="AccountHistory.aspx">Account History</a>
</li>
<li>Contact Us
</li>
<li><a id="refer" href="#">Refer a Friend</a>
</li>
<li><a id="tracker" href="#">Incentive Tracker</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle pull-right" 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">
<div class="navbar-brand">
<a href="#">
<img height="45" class="navbar-left" src="http://i.ytimg.com/vi/PDfWeUP09TA/hqdefault.jpg" /></a>
</div>
<ul class="nav navbar-nav navbar-right navbar-text">
<li><a id="homeLink" href="#" data-target="home_container">Home</a></li>
<li><a id="contractslink" href="Contracts.aspx">Contracts</a></li>
<li><a id="accounts" href="AccountHistory.aspx">Account History</a></li>
<li>Contact Us</li>
<li><a id="refer" href="#">Refer a Friend</a></li>
<li><a id="tracker" href="#">Incentive Tracker</a></li>
</ul>
</div>
</div>
<div class="center-block" id="divider">
<div class="nav-divider">
<h4 class="text-center">HOME</h4>
<%--<asp:Button Text="Logout" CssClass="btn btn-group-sm form-control" ID="btnLogOut" runat="server" align="right" OnClick="btnLogOut_Click"/>--%>
</div>
</div>
</div>
ul li a{
padding-left: 10px !important;
padding-right: 10px !important;
}
Im not frontend, but it should help :)
I wrapped img and ul by div, and thru smaller padding get img to row with menu.
Its just a suggest, problem is, ul li a is too big, and push img up
I'm trying to make my navbar semitransparent on this code but I'm not able to do it:
<nav class="navbar navbar-default navbar-fixed-top transparent" >
<div class="container">
<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="/">brand</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>Searches</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Legal <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Terms</li>
<li>DMCA</li>
<li>RTA</li>
<li class="divider"></li>
<li>Contact</li>
Try this in your code, it worked for me -
give an id to the nav
like this-
<nav class="navbar navbar-default navbar-fixed-top transparent" id="nav1">
Then apply this in your css-
#nav1
{
background-color:#F00; /*whichever you want*/
opacity: 0.5;
filter:(opacity=50);
}
in your bootstrap.css find the navbar you are using, for example, if you're using the default navbar search for .navbar-default or .navbar-inverted as per your case and set the opacity simply using the CSS opacity command.
Did the job for me.
It would be nice to see the orginal CSS.
Paste the css code that shows the opacity.
The way I see your problem I think you did not write the path correct enough so it doesn't overwrite the original css from bootstrap.
<div id="wrapper">
<div class="container">
<div class="nav">
<p>tessssssssssssssst</p>
<div>
</div>
</div>
#wrapper .container .nav{
background-color: red;
opacity: 0.3;
}
#wrapper .nav {
opacity: 1.0;
}
http://jsfiddle.net/7h4hrvhu/
I have this Bootstrap head menu, and i want the Login anchor, allways on the right, after the UL nav, and collapsed button.
I've tried a .pull-right on that, but didn't work.
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">
<img alt="Logo" src=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home</li>
<li class="dropdown">link2</li>
<li class="">link3</li>
<li class="">link4</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
<a href="#" class="btn btn-primary">
Login</a></div>
</nav>
</header>
Because there's problem with jsfiddle currently, I'll paste modified code here:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="pull-right">
<a id="rightAnchor" href="#" class="btn btn-primary">
Login</a>
</div>
<button type="button" class="navbar-toggle" 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="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home
</li>
<li class="dropdown">link2
</li>
<li class="">link3
</li>
<li class="">link4
</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
Firsltly, you're missing one closing div, just before the nav closing tag. Next, I've added div with pull-right class just before button in navbar-header. Finally, add some margins so that login anchor would look same as menu:
#rightAnchor {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
UPDATE: I did not check how it behaves when we have different resolution. How about this: we create 2 login anchors and controll theirs appearance with media queries? With this HTML would look like this:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div id="rightAnchorMobile" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<button type="button" class="navbar-toggle" 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="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<div id="rightAnchor" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home
</li>
<li class="dropdown">link2
</li>
<li class="">link3
</li>
<li class="">link4
</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
And CSS:
#media screen and (min-width:768px) {
#rightAnchorMobile {
display: none;
}
}
#media screen and (max-width: 768px) {
#rightAnchor {
display: none;
}
}
#rightAnchorMobile > a {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
#rightAnchor > a {
margin-top: 8px;
margin-left: 15px;
margin-bottom: 8px;
}