I am attempting to use Bootstrap to build a navbar for my website. I am have tried to use the toggling feature that allows the menu to be more accessible on mobile devices. When I zoom in to 200% on my browser, it toggles fine and works great. When I connect to my site on my phone however, it fails to automatically toggle.
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="index.php"><i class="fa fa-server"></i> Server List</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Servers</li>
<li class="dropdown">
Purchase<b class="caret"></b>
<ul class="dropdown-menu">
<li>Highlighted Spot</li>
<li>Advertising</li>
</ul>
</li>
<li>Support</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
My Account<b class="caret"></b>
<ul class="dropdown-menu">
<li>My Servers</li>
<li>Favorites</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
I've tried everything I've found online to no avail, so I greatly thank anyone who helps me out with this!
Related
Good day guys, I had a bit trouble in the collapse navbar. It doesn't align to the right side of the browser when i clicked the collapse button?
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
My Site
<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>Home</li>
<li>About</li>
<li>Contacts</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
<li>Logout</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
Sample output
You must use navbar-header, then you have brand and hamburger icon on the same level and the whole content of your menu below that line. So basically your code should look something like that:
<div class="navbar-header">
My Site
<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>
Link to live example: http://www.bootply.com/jowa705iHl
Here you can find all the needed documentation: http://getbootstrap.com/components/#navbar
Best of luck :)
You need to wrap the collapse button and brand link in .navbar-header:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<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>
My Site
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contacts</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
<li>Logout</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
I am trying to implement a navigation drawer theme for my website using Boostrap. I am able to convert my navbar in desktop screen size to a navigation drawer button for smaller screens. However what I am trying to achieve is get the 3 bar icons of the drawer on the left hand side and "MyName" should not be visible on smaller screen sizes. Could some one help me out?
My HTML code is:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<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">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</div>
</body>
I have created a JSFiddle for this: https://jsfiddle.net/DTcHh/9394/
Add the following classes: hidden-xs (class="navbar-brand hidden-xs") and pull-left (class='navbar-toggle pull-left")
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<button class="navbar-toggle pull-left" 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">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
I'm trying to make a navbar using bootstrap to my own needs, but have stumbled upon a problem.
I want the first two links from the left (home and menu glyphicons) to not collapse when window is sized down. The rest would collapse.
Screenshot link
enter link description here
Here is my code
<template name="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li><a class="navbar-nav" href="{{pathFor 'home'}}"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a class="navbar-nav" id="showMenu" href="#"><span class="glyphicon glyphicon-align-left"></span></a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav">
<li class="{{activeRouteClass 'home' 'newPosts'}}">
New
</li>
<li class="{{activeRouteClass 'bestPosts'}}">
Best
</li>
{{#if currentUser}}
<li class="{{activeRouteClass 'postSubmit'}}">
Submit Post
</li>
<li class="dropdown">
{{> notifications}}
</li>
{{/if}}
</ul>
<ul class="nav navbar-nav navbar-right">
{{> loginButtons}}
</ul>
</div>
</div>
</nav>
</template>
Move them into a separate <ul> object without the nav navbar-nav classes in order to disable this behaviour.
I have the following code, what I want is to align the logout button right hand side and three modules (contact us, about epm and modules) at center, so how can I do this with the help of bootstrap.Thanks in advance.
<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="home.jsp" style="color:purple;cursor: auto" id="wel">Welcome Admin</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">About EPM</li>
<li>Contact Us</li>
<li class="dropdown">
Modules <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Employer Section</li>
<li class="divider"></li>
<li>Employee Section</li>
<li class="divider"></li>
<li>Client Section</li>
<li class="divider"></li>
<li>Project Details</li>
</ul>
</li>
<li>
<a onClick="logout();" class="navbar-brand pull-right">
<span class="glyphicon glyphicon-off" id="icon"> Logout</span>
</a>
</li>
</ul>
</div>
</div>
To right align the logout object, you can use bootstrap's navbar-right class.
To center align the other links you can use the following CSS:
#bs-example-navbar-collapse-1 { text-align:center; }
.centered-navbar { display:inline-block; float:none; vertical-align:top; }
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<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="home.jsp" style="color:purple;cursor: auto" id="wel">Welcome Admin</a>
</div>
<ul class="nav navbar-nav centered-navbar">
<li class="active">About EPM</li>
<li>Contact Us</li>
<li class="dropdown">
Modules <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Employer Section</li>
<li class="divider"></li>
<li>Employee Section</li>
<li class="divider"></li>
<li>Client Section</li>
<li class="divider"></li>
<li>Project Details</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a onclick="logout();">
<span class="glyphicon glyphicon-off" id="icon"> Logout</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Bootply here: http://www.bootply.com/ddmUGfX0PI
im using the latest version of bootstrap and when i resize the screen browser the navbar, when dropped down with the small toggle button overlaps the text on the page instead of pushing page content down. I have researched the problem several times. I tried putting padding-bottom on the navbar and padding-top on the body. I have tried numerous other things suggested but nothing is working. Appreciate any help.
This is the html code:
<div class="navbar navbar-inverse 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>
<div class="navbar-brand navbar-brand-left" href="#"><img src="somepicture"></div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered"">
<ul class="nav navbar-nav">
<li>Home</li>
<li>What's On</li>
<li>About Us</li>
<li>Parties</li>
<li>Gallery</li>
<li>Menu</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Share<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Facebook</li>
<li>Twitter</li>
</ul>
<li>Contact Us</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
the css i have used was to only apply color/font/font size etc, nothing that would have contributed to this problem. Its a basic and simple brochure website and im sure the problem is probably right in front of my eyes but im not experienced enough to notice as im only learning, but still would appreciate anyone that could help.
The navbar works perfectly fine and the way its supposed to in a normal size desktop but the problem is only when i resize the browser to a mobile phone size.
This is a url of an image of the problem to make it easier to understand:
http://s1368.photobucket.com/user/oliviah452/media/Screenshot2_zpsc9ffafb1.png.html
Cleaned up your code a bit in the process, but if you set your navbar to be navbar-static-top rather than navbar-fixed-top, your content will get pushed down when the collapsed menu is expanded.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<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.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<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>
<div class="navbar-brand navbar-brand-left" href="#">
<a href="index.html">
<img src="somepicture"></img>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>What's On
</li>
<li>About Us
</li>
<li>Parties
</li>
<li>Gallery
</li>
<li>Menu
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Share<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Facebook
</li>
<li>Twitter
</li>
</ul>
<li>Contact Us
</li>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test