I have a simple bootstrap navbar. and after this I have bootstrap carousel in the header of the site , then they work good on the lg and md screen ... but in the sm and xs screen when I click the button the navbar-collapse appear for a about 1 second then it disappear... I think that problem because of the carousel in the header but I don't know how to fix that.. I need some one to tell me the solution
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle -->
<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="#"><h3>Bondok <span>BE</span></h3></a>
</div><!-- navbar-header -->
<!-- links -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home <i class="fa fa-home fa-lg"></i></li>
<li>About <i class="fa fa-user fa-lg"></i></li>
<li>Resume <i class="fa fa-file-text fa-lg"></i></li>
<li>Portfolio <i class="fa fa-photo fa-lg"></i></li>
<li>Contact <i class="fa fa-envelope fa-lg"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
and the style.scss is :
.navbar {
#include border_r(0);
margin: 0;
background-color: $white_color;
border: none;
height: 60px;
.navbar-header .navbar-toggle {
background-color: $main_color;
span {
background-color: $white_color;
}
}
.navbar-brand {
border-top: 3px solid $main_color;
h3 {
#include font_spec(24px, bold);
margin-top: 0;
span {
color: $main_color;
font-size: 28px;
}
}
}
.navbar-collapse {
z-index: 9999;
background-color: #fff;
}
}
Just use:
.navbar-default{
z-index: 1030;
}
no need z-index in .wrapper .navbar .navbar-collapse
Here is the working pen http://codepen.io/anon/pen/wzqBok
Related
Does anyone know how I can use an image as a nav bar,
I want to use my logo as a button so that when users click on the logo, a drop down menu appears that fills the entire page.
Currently I have a burger Tab and am implementing the drop down menu like so
<nav class="navbar navbar-inverse">
<div class="container-field">
<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="#">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: darkgray;
color: #fff;
padding: 1% 0;
font-size: 1.2em;
border:0;
background-image: i
}
.navbar-brand {
float: right;
min-height: 55px;
padding: 0 15px 5px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active
a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: darkgray;
}
.navbar-inverse .navbar-nav li a {
Color:#D5D5D5;
}
Since you said you're fine with using JavaScript.
Add the following code to your HTML document:
<!DOCTYPE html>
...
<script type="text/javascript" src="thePathToYourJSfile.js"></script>
</body>
</html>
With CSS, style your menu however you wish to, but also add:
display: none;
And your JavaScript could look something like the following:
var logo = document.getElementById('id-of-your-logo')
var menu = document.getElementById('id-of-your-menu')
// this attaches a listener for the click event to your logo element
logo.onclick = function() {
// when your logo is clicked, the code in this function will execute
// the code below checks whether or not the menu is already displaying, and then displays the menu or hides it accordingly
menu.style.display = window.getComputedStyle(menu).display !== "none" ? "none" : "block"
}
Your html had some small errors. It should have been like this
<nav class="navbar navbar-inverse">
<div class="container-field">
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
If you encounter any trouble just tell us
When I make the window smaller, I can still click on where the hamburger icon should be, and the dropdown drops and it works, but there is NO icon for the hamburger (aka the 3 little lines) any help would be awsome!
<nav class="navbar navbar-fixed-top">
<div class="container">
<!-- 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>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">GroupWrites</a>
</div>
<!--Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Explore</li>
<li>Publish</li>
<li>Library</li>
<li>How It Works</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<% if(!currentUser){ %>
<li>Create Account <i class="fa fa-user-plus"></i></li>
<li>Log In <i class="fa fa-user-circle"></i></li>
<% } else { %>
<li>Signed In As <%= currentUser.username %></li>
<li>Log Out <i></i></li>
<% } %>
</ul>
</div>
</div>
</nav>
CSS
body { font-family: comfortaa; padding-top: 90px; line-height: 1.75 }
.navbar{ background-color: #3c3d41; color: white; padding: 5px; }
.navbar li a:hover,
.navbar li a:active { border-bottom: 2px solid white; background-color: #3c3d41; color: white ; }
.navbar-brand:hover,
.navbar-brand:active { border-bottom: 2px solid white; background-color: #3c3d41; color: white ; }
a { color: white; }
#button { background: rgb(100,149,237); color: white; }
That is my navbar code. It is in my header and everything works perfectly, I just cannot actually see the hamburger icon itself. Any help would be amazing. Please and thank you. Seems like something very easy that I quite cant put my finger on.
So I got it to work , by changing the class from "navbar navbar-fixed-top" to "navbar-inverse navbar-fixed-top" still not sure why this is though. With navbar-inverse my hamburger icon-bars display. So I just customized .navbar-inverse to my same colors and css as I wanted.
i need help with my code
using bootstrap to design n new in it. did the top nav, doing the side bar. but the left bar not lapping to the left completelty and the gap between the top and the side is too much. how can i reduce it
<!--BEGINING 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">
<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="../img/logo.png" alt="Logo"></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>General Requirment</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control inputcurve" placeholder="Search">
</div>
<button type="submit" class="btn btn-default redbut"><span class="glyphicon glyphicon-search red"></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 07063859559</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> info#myactiveschool.com</li>
<li class="dropdown">
Chike Okoli Vitalis <span class="caret"></span>
<ul class="dropdown-menu" role="menu nav1">
<li><i class="glyphicon glyphicon-picture"></i> Profile Picture</li>
<li><i class="glyphicon glyphicon-edit"></i> Account Setting</li>
<li><li><a href="#"><i class="glyphicon glyphicon-log-out"></i> Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--END NAV=========================-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked span3">
<li class="active"><i class="glyphicon glyphicon-picture"></i>Home</li>
<li><i class="glyphicon glyphicon-edit"></i>About us</li>
</ul>
</div>
</div>
<!--START SIDE NAV===================================================================================================================================-->
here is my css
.side-nav {
position: fixed;
top: 51px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: #222;
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
}
.side-nav>li>a {
width: 225px;
}
.side-nav li a:hover,
.side-nav li a:focus {
outline: none;
background-color: #000 !important;
}
}
.side-nav>li>ul {
padding: 0;
}
.side-nav>li>ul>li>a {
display: block;
padding: 10px 15px 10px 38px;
text-decoration: none;
color: #999;
}
.side-nav>li>ul>li>a:hover {
color: #fff;
}
.side-nav{right: 0;left: auto;}
I have set up custom
I have set up a new breakpoint so that the mobile menu appears at 1200px with the following css:
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
the issue is that when I get to that breakpoint the mobile menu always collapses and never reveals,
Here is the markup:
<nav class="navbar navbar-inverse a-1-navbar a-1-navbar-shadow" role="navigation" id="a-1-main-menu">
<div class="container">
<div class="navbar-header a-1-navbar-header">
<button type="button" class="navbar-toggle a-mobile-toggle" data-toggle="collapse" data-target="#a-menu" style="float:left;">
<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 a-1-logo-wrapper" href="#" style="float:right;">
<img class="hidden-xs a-1-logo" src="life.png" alt="">
<img class="visible-xs a-1-logo" src="life.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="a-menu" >
<ul class="nav navbar-nav navbar-right a-menu-bar">
<li class="active"> Vehicles <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Specials <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Finance & Insurance <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Servicing <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Parts <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Contact <span class="glyphicon glyphicon-chevron-down"></span></li>
</ul>
</div>
</div>
Is some custom JavaScript needed?
I've tested your code and there's no problem in revealing collapsed items.
Perhaps you should check the following thing first:
Did you include jQuery?
Did you include Bootstrap3 js resource?
Did you include collapse plugin in your Bootstrap3 js resource?
For Bootstrap3 you need to add more lines in your css
While there's no problem hiding collapsed items, it DOES have problem when showing the dropdown list. The problem is you miss out this:
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
Here's the example on Codepen.
I've implemented twitter bootstrap on my site.I want to know how to make nav-bar responsive like one on twitter bootstrap official site.
There is problem with alignment in small size screens take a look at pic below.
HTML CODE:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-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="index.php">Studyfoyer</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Learn</li>
<li>Teach</li>
<li>Discuss</li>
<li class="dropdown">
Connect<b class="caret"></b>
<ul class="dropdown-menu">
<li>Contact Us</li>
<li class="divider"></li>
<li>Blog</li>
<li>About</li>
<li>Contribute</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CUSTOM CSS:
.nav{
float:right;
}
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
padding-left: 0;
padding-right: 0;
}
.navbar-wrapper .navbar {
padding-left: 15px;
padding-right: 15px;
}
FYI to play with sizesmy_Site
#media queries are what you are looking for. You can find many examples, one is here