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">
Related
I copied this bootstrap template. I have an issue is that when its in mobile mode (small screen) its not showing the sidebar menu(dashboard, menu, content, categories etc) inside the burger. How can I fix it?
My HTML code:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url('cms/dashboard')}}">Myhero admin panel</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a target="blank" href="{{ url('')}}">Back to site</a></li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-3 col-md-2 sidebar ">
<ul class="nav nav-sidebar ">
<li>Dashboard</li>
<li>Menu</li>
<li>Content</li>
<li>Categories</li>
<li>Products</li>
<li>Orders</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
#include ('inc.sm')
#include ('inc.errors')
</div>
</div>
#yield('cms_content')
</div>
</body>
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap. To ensure that you have the latest working version of bootstrap you can use cdn to serve the required javascript files.
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity=[...]>
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>
I am new to Web Dev, and i am facing an issue wrt to Div : https://jsfiddle.net/debashis_gt540m/17mmmxps/2/
The three div's at the end have some amount of spacing in between them, I've tried with inserting all 3 div's within a single one, but it didn't help. Anyone ? I want to get rid of the spaces between the 3 div's.
The code is:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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="https://in.linkedin.com/in/debdebashis" target="_blank">Debashis Deb</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Me
</li>
<li>Skills
</li>
<li>Interests
</li>
<li>Contact Me
</li>
<li>
<a> </a>
</li>
</ul></div>
</div>
</nav>
<div>
<div class="container-fluid bg-1 well">
<div class="row">
</div>
</div>
<div class="container-fluid bg-2 well">
</div>
<div class="container-fluid bg-3 well">
</div>
</div>
.well {
margin-bottom: 0px !important;
}
the 3 divs have bottom margins, that's what adding the space. add this css:
.container-fluid{margin-bottom:0px;}
im building a "one page" website with two different navbars, one for desktop and the other for small screen sizes. The links in both navbars are same, just the appearance is different. My problem is that i havent find a way to scrollspy both of them, i tried this way but it didnt work:
<body data-spy="scroll" data-target=".navbar, .mobinavi" data-offset="0">
Heres the HTML:
<!-- NAVIGOINTI -->
<div class="container hidden-xs">
<div class="row">
<div class="col-sm-12 navilaatikko">
<nav class="navbar navbar-default navbar-static-top paanavi" data-spy="affix" data-offset-top="140">
<div class="container">
<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>
<span class="navbar-brand"></span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Sulka</li>
<li>Tapahtumat</li>
<li>Galleria</li>
<li>Yhteystiedot & Palaute</li>
<li>Henkilökunta</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="visible-xs mobinavi" data-spy="affix" data-offset-top="140">
Sulka
Tapahtumat
Galleria
Yhteystiedot & Palaute
Henkilökunta
</div>
<!-- /NAVIGOINTI -->
Any help? Thanks.
I'm using the regular navbar of bootstrap not the fixed-top one, I figured out that when .navbar{position: fixed;} it overlaps, but that's not what I want. I want when I scroll down the menu stays on the top of the page not to move with the page and overlap the content when the menu collapses.
this is my code so far:
<div class="navbar-wrapper">
<div id="menu" class="navbar navbar-right navbar-default nob no-focus" role="navigation">
<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="#">Project name</a> -->
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
this is what is happening now because is fixed-top
[http://es.tinypic.com/view.php?pic=fc0i6s&s=8#.U9itaON5Py4]
thanks in advance.
Try this, it will keep the navbar fixed rather than overlap once u start scrolling down.
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hope this helps :)