I want to develop a web application with bootstrap.I have a left sidebar menu. I want that menu toggle from right while this page is opened from phone browser.
I want to create like this: https://formstone.it/
My example is here: https://jsfiddle.net/gd39damu/3/
html code:
<body>
<nav class="navbar navbar-inverse 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="#">Project name</a>
</div>
</div>
</nav>
<div class="container">
</div>
<div class="sidebar">
<div class="navigation">
<ul>
<li>aa</li>
<li>bb </li>
<li>cc</li>
<li>dd</li>
</ul>
</div>
</div> <!-- // Sidebar -->
</body>
css code:
#import url('https://getbootstrap.com/dist/css/bootstrap.min.css');
.sidebar {
background-color: #aaaaaa;
}
#media (min-width: 800px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
}
.navigation {
width: 240px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 5;
}
}
.navigation {
background: #455a64;
overflow-y: auto;
padding: 30px;
}
#media (max-width: 800px){
.sidebar {
display: none;
}
}
I have used jQuery toggle and CSS to achieve this You can check the full code here on pastebin
I recommend using another jQuery Plugin for that, to make the menu smoother: http://ascott1.github.io/bigSlide.js/
It's a lightweight lib with around 1kb size.
use jQuery toggle function with this
if ($(window).width() < 768){});
Use an off-canvas overlay menu for Bootstrap.
Example: http://codeply.com/go/zyKyFfeUcH
Related
I have a fixed-top navbar, i made a function to make it shrink on scroll but i have a problem, the ul class in the navbar is not shrinking properly, i gave it a line height to align it vertically with the navbar-brand but i can't figure out how to fix that when the navbar shrinks, here is my code:
$(document).ready(function(){
var scrollTop = 0;
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
$('.counter').html(scrollTop);
if (scrollTop >= 100) {
$('#global-nav').addClass('scrolled-nav');
} else if (scrollTop < 100) {
$('#global-nav').removeClass('scrolled-nav');
}
});
});
#global-nav{
height: 150px;
-webkit-transition: height .5s, line-height .5s;
transition: height .5s, line-height .5s;
}
.navbar-brand img{
height:95px;
}
.navbar-default .navbar-nav>li>a{
line-height: 95px;
}
.navbar-brand
img{
display: inline-block;
-webkit-transition: all .5s;
transition: all .5s;
}
.scrolled-nav .navbar-brand img{
height: 50px;
}
.scrolled-nav{
height: 100px !important;
line-height: 100px !important;
}
.counter{
width: 20px;
height: 20px;
background: black;
color: #fff;
position: fixed;
top: 120px;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav id="global-nav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<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>
<a class="navbar-brand page-scroll" href="#page-top"><img src="http://placehold.it/350x150"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="active"> LINK 1 </li>
<li> LINK 2 </li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Your issue is
.navbar-default .navbar-nav>li>a {
line-height: 95px;
}
You need that to be 70px when small to account for the padding (or remove the padding when small).
Simple answer:
.navbar-default.scrolled-nav .navbar-nav>li>a {
line-height: 70px;
}
This is tricky to replicate using code snippets, but the CSS that is controlling the height of the nav items is this:
.navbar-default .navbar-nav>li>a {
line-height: 95px;
}
Because this code uses line-height to center the text in the nav buttons, this is the property you'll need to adjust the shrink their height.
Alternatively, you can separate line height from the shrinking nav and use padding-top and padding-bottom, and adjust these properties when the scrolled class is added.
It is not a duplicate of this. That question is about replacing the text logo with image. This question is about placing an image in addition to the text logo.
I have the following bootstrap code that attempts to show the site logo followed by its name. I am using the bootstrap class navbar-brand to do so:
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">
<img src="./EnterpriseCopy_files/android-icon-48x48.png">
</a>
<a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">Enterprise Copy</a>
</div>
<div class="navbar-collapse collapse">
The logo ends up looking like this:
I then have to add style="margin-top:-13px" to the img tag in order to push up the image and make it look good:
This can't be the right way to do this. Is there a better way of doing this?
The original code here, one with the style tweak here.
The problem is with .navbar-brand having padding:
padding: 15px 15px;
It is in bootstrap's default style. So remove that and give:
.navbar-brand {padding: 0;}
You are all set. See the screenshot, where I gave padding: 0; to see it work:
If want to add both an image and text inside the navbar-brand class instead of separating them, apply display: inline-block to your img and then adjust the padding for navbar-brand itself to accommodate everything.
.navbar .navbar-brand {
padding: 2px 15px;
}
.navbar .navbar-brand img {
display: inline-block;
}
See working Snippet.
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Carousel */
.carousel-caption {
z-index: 10 !important;
}
.carousel-caption p {
font-size: 20px;
line-height: 1.4;
}
#media (min-width: 768px) {
.carousel-caption {
z-index: 10 !important;
}
}
/**ADDED CSS**/
.navbar .navbar-brand {
padding: 2px 7.5px;
}
.navbar .navbar-brand img {
display: inline-block;
}
/**ADDED CSS**/
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">
<img src="http://vbrad.com/misc/EnterpriseCopy_files/android-icon-48x48.png">Enterprise Copy
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Mailbox
</li>
<li>Copy Groups
</li>
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>bar#foo.com
</li>
<li>Sign Out
</li>
</ul>
</div>
</div>
</div>
For me, setting class d-inline-block and align-middle on both anchor elements worked. I'm using bootstrap 4.3.1.
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 am using twitter Bootstrap for my website and it has a fixed navbar on top. When I am resizing window in my desktop browser, everything is fine. When I am opening the same site on mobile, I can see navbar-brand but not the toggle button. I'm posting screenshots for a better understanding (first one is desktop firefox and second one is android):
This is driving me crazy!!!
The Code:
.navbar-floating {
background: black;
color: #5b5656;
width: 100%;
border-radius: 0;
}
.navbar-floating .navbar-brand {
color: #810000;
font-size: 20px;
text-transform: uppercase;
}
.navbar-floating .navbar-brand:after {
content: ' | ';
color: #810000;
position: relative;
top: -3px;
}
#floating-nav {
position: fixed;
/* display: none; */
top: 0;
width: 100%;
height: 50px;
}
#floating-nav.navbar {
min-height: 1px;
}
#floating-nav ul li a {
font-size: 20px;
}
#floating-nav ul li a:hover {
background: none;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
<nav class="navbar navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hidden-nav">
<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 scroll-top" href="#">DSA Media Group</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="hidden-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agency</li>
<li>Capabilities</li>
<li>Projects</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
What am I doing wrong? Any help is much appreciated.
Just add a navbar-default class to the div wrapping your <ul> element like this:
<div class="collapse navbar-collapse navbar-default" id="hidden-nav">
<ul class="nav navbar-nav">
....
</ul>
</div>
Try using .navbar-dark as
<nav class="navbar navbar-dark navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
.........
</div>
</nav>
For me, the solution is really annoying
change navbar-expand-sm to navbar-expand-lg in side <nav class=
It's inside of your bootstrap css. It's defined by default to hidde on md. all you gotta do is creat a new line in your style page..navbar-expand-md .navbar-toggler{display: block !important;}
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