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;}
Related
I have a toggle that works for the hamburger class; however I cannot figure out how to make it so that when I click on a child of the hamburger class it will toggle the hamburger class.
<div class="navbar-toggle pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<div class="hamburger" id="hamburger-6">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#a">a</a></li>
<li><a class="page-scroll" href="#b">b</a></li>
</ul>
</div>
$(document).ready(function(){
$(".hamburger").click(function(){
$(this).toggleClass("is-active");
});
});
If you mean the hamburger, it works as expected.
EDIT: menu closes when a menu element is clicked
$(document).ready(function() {
$("body").on("click", ".hamburger", function() {
$(this).toggleClass("is-active");
});
$("body").on("click", "li", function() {
$(".hamburger").removeClass("is-active").trigger("click");
});
});
.navbar-toggle {
width: 100%;
}
.hamburger {
width: 50px;
height: 50px;
color: black;
cursor: pointer;
}
.line {
display: block;
height: 5px;
width: 100%;
background: black;
border-radius: 9px;
margin-bottom: 10px;
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-toggle pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<div class="hamburger" id="hamburger-6">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#a">a</a></li>
<li><a class="page-scroll" href="#b">b</a></li>
</ul>
</div>
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
I am trying to create an Offcanvas Left nav bar that can be brought into view on button click.
Currently it opens fine but when it closes the top navigation of the page is very jumpy and closes instantly without an animation.
The left bar also overlaps the footer and the footer doesn't move the way it should like the top nav bar.
Bootply
Added -webkit-transition: all 1s ease; to the footer and wrapper class, because everything has to be animated.
I set overflow hidden on html, body selector, this is a fix for the jumpy footer.
The only thing left to do now is adding two lines in your javascript:
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
and
(".footer").css('-webkit-transform', 'translate(0, 0)');
I'm no expert so feel free to correct me, but i think it works the way you want it to.
$(document).ready(function() {
var menu = "close";
$(".menuToggle").click(function() {
if (menu == "close") {
$(".leftNavbar").css("-webkit-transform", "translate(0, 0)");
$(".wrapper").css('-webkit-transform', 'translate(20%, 0)');
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
menu = "open";
} else {
$(".leftNavbar").css("-webkit-transform", "translate(-100%, 0)");
$(".wrapper").css('-webkit-transform', 'translate(0, 0)');
$(".footer").css('-webkit-transform', 'translate(0, 0)');
menu = "close";
}
});
});
/* CSS used here will be applied after bootstrap.css */
.leftNavbar {
position: fixed;
width: 20%;
left: 0;
overflow: hidden;
background-color: green;
-webkit-transform: translate(-100%, 0);
-webkit-transition: all 1s ease;
}
.menuToggle .navbar-toggle .icon-bar {
background-color: black;
}
.menuToggle .navbar-toggle {
display: block;
float: left;
border: 1px solid gray;
margin-left: 5px;
margin-top: -10px;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
-webkit-transition: all 1s ease;
}
footer,
.push {
min-height: 40px;
height: auto;
}
.footer {
color: white;
-webkit-transition: all 1s ease;
}
<div class="leftNavbar">
<h2>Sidebar menu</h2>
<nav>
Home
About
Contact
Prices
</nav>
</div>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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">
<img id="logo" src="Logos/LetterHillustrator.png">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Services
</li>
<li>Our Prices
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!--------SIDE NAVBAR-------->
<!--<div class="leftNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="active"><span class="glyphicon glyphicon-chevron-right"></span> Home</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 1</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 2 (active)</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 3</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 4</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 5</li>
</ul>
</div>-->
<!-----SIDEBAR------->
<div class="menuToggle">
<button class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="push"></div>
</div>
<footer class="footer navbar-inverse">
<div class="container">
<h6 style="width:50%; text-align:center;">34 The Broadway, Greenford UB6 9PT, tel: 020 8575 0880, Email: info#GoodHome.co.uk</h6>
</div>
</footer>
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