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=[...]>
Related
I am developing a website using ASP.NET MVC. Bootstrap is used for the UI. I have the below HTML in my layout view.
<body>
#*Header*#
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#">App Name</a>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
#*<li class="active">Dashboard</li>*#
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div>
#RenderBody()
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">
© 2017 xxxxxxxxxx
</p>
<a class="navbar-btn btn-default btn pull-right">
<span class="glyphicon glyphicon-tower"></span> <strong>This is test</strong>
</a>
</div>
</div>
</body>
When I try to see the page in smaller devices (iPhone5/6) etc, I see that the contents from my content page grows below the sticky footer and hence not getting displayed. But, the display is fine in bigger devices. How can I add a scrollbar, or make the content scrollable when viewed in smaller devices?
Fixed navbars overlap main content by default. To avoid this you need to add margins to your content block. According to bootstrap 3 it will look like this:
<div class="page-content">
#RenderBody()
</div>
And then in your styles file:
.page-content {
maring: 50px 0;
}
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;}
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">