I am currently learning Bootstrap and basic HTML at the moment, and I would like to have a navigation button (hamburger) to simplify my navbar for mobile. It's all there, when I resize my window on my desktop, but it does not work when I look on my nexus. Do I have to add a media query? I have just heard of them. Here is what I have in HTML
<nav class="navbar navbar-default 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>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="logo">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<div class="delightful-header"><p>Delighful Days Daycare</p></div>
<div class="tagline"><p>"Where Everyday Is Delightful"</p></div>
</div>
<nav class="col-sm-12 col-md-12 col-lg-6">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li class="active">ABOUT US</li>
<li>PRICING</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</div>
</nav>
Related
I have designed menu for large devices and mobile devices, but the problem is toggle menu always shows in expanded view. The problem occurred when col-md-3 & col-md-9 are given.
Is there any way to fix this?
My HTML Code
<div class="container">
<div class="row">
<div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div>
<div class="col-md-9">
<nav class="navbar navbar-default" style="background:none; border:none;">
<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>
</div>
<div class="collapse navbar-collapse visible-xs" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li>Home</li>
<li>About us</li>
<li>Employers</li>
<li>Job Seekers</li>
<li>Testimonials</li>
<li>Contact us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
now Look at this
https://jsfiddle.net/MadhawaMB/qhft4w1L/1/
Im change some code
toggle get grouped for better mobile display
<button type="button" class="navbar-toggle" 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>
<div class="container">
<div class="row">
<div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation" style="background:none; border:none;">
<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="#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>
<!-- 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">
<ul class="nav navbar-nav navbar-right text-center">
<li>Home</li>
<li>About us</li>
<li>Employers</li>
<li>Job Seekers</li>
<li>Testimonials</li>
<li>Contact us</li>
</ul>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav></div>
</div>
</div>
I got banner 750x100 above the navbar. When I minimize window to col-xs, I got two problems -
1) Navbar-brand skip under the line. (Red line)
2) Banner is too small, I want align it to center or enlarge the height. (Blue line)
<div class="container-fluid banner text-center">
<div class="row">
<div class="col-md-12">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x100" alt="" style="margin: 0 auto;">
</a>
</div>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container">
<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="#">Some long texthere</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
</div>
</div>
</nav>
It's possible to arrange place as I wrote, or should I try other way?
Question Background:
I have a standard Bootstrap collapsible NavBar that is pulled-right.
The Issue:
This is the NavBar on a non-mobile device:
This is pulled right to allow for this desired right-aligned posistion.
This is the NavBar collpased on a mobile device:
**Note that the item in the dropdown are aligned right, this make sense as its pulled right but I want them centered when on a mobile device, whilst keeping them aligned right on a non-mobile device
The Code:
I thought that setting text-center on the <ul> list would solve the issue but it does not:
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="pull-right text-center">
********Set text-center but this dosen't work********
<ul class="nav navbar-nav text-center">
<li>Services</li>
<li>Our Mission</li>
<li>Projects Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
Any help with setting these <ul> list elements centered but keep the menu items pulled right on a non mobile device would be great.
Instead of using pull-right you should use navbar-right.Just put navbar-right to the unordered-list, remove the pull-right div, and the links will be centered on small devices.Working example.
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li>Services
</li>
<li>Our Mission
</li>
<li>Projects Gallery
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
Issue with navlinks padding in "sm" screen size. when im trying to write mediaquery for "sm" it effects both in "lg" and "md".
http://jsfiddle.net/L1ozsu2n/
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-push-9 col-md-3 col-md-push-9 col-sm-3 col-sm-push-9">
<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>
<form class="navbar-form navbar-right " role="search">
<div class="form-group form_search">
<input type="text" class=" search_box" placeholder="SEARCH"/>
</div>
</form>
</div>
</div>
<div class="col-lg-9 col-lg-pull-3 col-md-9 col-md-pull-3 col-sm-9 col-sm-pull-3">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>NEW ARRIVALS</li>
<li>GOODSALE</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Do you mean how the menu on the right is up against the top of the div, instead of vertically centered?
Remove the "navbar-header" class from the fourth div.
after nav, use .container-fluid instead of container.
<nav class="navbar navbar-default">
<div class="container-fluid">
I have created this menu for my needs. It is responsive, since I'm using bootstrap, and it is custom, because i needed 2 rows for the right side of the menu. What I need is, how can I have toggle-navigation for lower resolutions than 768x1280? This is how the menu is created:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="row col-xs-4">
<ul class="nav navbar-nav">
<li><img src="img/logo.png"></li>
</ul>
</div>
<div class="row col-xs-8" >
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right">
<li> </li>
<li> </li>
</ul>
</div>
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
I think that following example is ok for your needes:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu2">
<span class="sr-only">Toggle navigation2</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<li><img src="img/logo.png"></li>
</div>
<div class="row col-xs-8 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu1">
<ul class="nav navbar-nav">
<li> </li>
<li> </li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="row col-xs-12 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu2">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
You should add button like this where headerCol is id of your div which contains elements you want to collapse. I'm sorry for my bad english. I'll give you example:
This is my header navbar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#headerCol">
<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">MYSITE</a>
</div>
<div class="navbar-collapse collapse pull-right" id="headerCol"><!-- start nav-collapse -->
{% block headernav %}
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About us</li>
<li>Questions</li>
<li>Contacts</li>
</ul>
{% endblock %}
</div><!-- end nav-collapse -->
</div>
</div>