I am building a responsive navigation bar in bootstrap and trying to customize it to my need to make my own design.
I managed to get the drop down on mobile size window but there is margin which i can't seem to get rid of on the right nevertheless i tried overriding the classes attributes (please check the image below)
I am using bootstrap 3.3.7 and jquery-3.3.1
.navbar {
height: 50px;
color: #2a4068;
margin-bottom: 0px;
}
.navbar-default {
color: #2a4068;
background: #d8dfea;
border-bottom: solid 0px #2a4068;
box-shadow: 0px 1px 2px 0px #2a4068;
}
.container {
height: 50px;
padding-left: 0px;
padding-right: 0px;
}
.navbar-header {
height: 50px;
margin-left: 0px;
margin-right: 0px;
}
.navbar-collapse {
padding-left: 0px;
padding-right: 0px;
}
.navbar-nav {
margin-right: 0px;
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
margin: 0px 0px;
}
.navbar-right {
padding-left: 0px;
padding-right: 0px;
margin-right: 0px;
}
.logoImage {
z-index: 1;
margin-top: -7px;
margin-bottom: 20px;
}
.navbar-nav li {
text-align: center;
border-radius: 4px;
color: #2a4068;
cursor: pointer;
}
.navbar-nav li:hover {
background-color: #99b1d7;
color: #2a4068;
opacity: 0.7;
}
#nav_links {
display: block;
color: #2a4068;
font-weight: bold;
}
#navbar_menu {
width: 100%;
margin-right: 0;
margin-top: -10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Bootstrap</title>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand logoImage" href="index.php">
<img src="images/logo_large.png" title="Asserter" alt="logo" width="110" height="35" class="large-logo" id="brand-image" />
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="navbar_menu">
<ul class="nav navbar-nav navbar-right">
<li class="">Front</li>
<li class="">Admin</li>
<li class="">Profile</li>
<li class="">Chat</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="nav_links">Notifications</a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</li>
<li class="">Settings</li>
<li class="">Log out</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
</div>
<script src="js/jquery-3.3.1-dev.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
i need to have a perfect dropdown which lines up with the screen limits
I found small paddings in the .container-fluid class. Rest I do not see any margins.
.navbar {height: 50px; color: #2a4068; margin-bottom: 0px;}
.navbar-default {color: #2a4068; background: #d8dfea; border-bottom: solid 0px #2a4068;box-shadow: 0px 1px 2px 0px #2a4068;}
.container {height: 50px;padding-left: 0px;padding-right: 0px;}
.navbar-header {height: 50px;margin-left: 0px;margin-right: 0px;}
.navbar-collapse {padding-left: 0px;padding-right: 0px;}
.navbar-nav {margin-right: 0px;margin-left: 0px;padding-left: 0px;padding-right: 0px;margin: 0px 0px;}
.navbar-right {padding-left: 0px;padding-right: 0px;margin-right: 0px;}
.logoImage {z-index: 1; margin-top: -7px;margin-bottom: 20px;}
.navbar-nav li {text-align: center;border-radius: 4px;color: #2a4068;cursor: pointer;}
.navbar-nav li:hover{background-color: #99b1d7;color: #2a4068;opacity: 0.7;}
#nav_links {display: block;color: #2a4068;font-weight: bold;}
#navbar_menu {width: 100%;margin-right: 0;margin-top: -10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand logoImage" href="index.php">
<img src="images/logo_large.png" title="Asserter" alt="logo" width="110" height="35" class="large-logo" id="brand-image"/>
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="navbar_menu">
<ul class="nav navbar-nav navbar-right">
<li class="">Front</li>
<li class="">Admin</li>
<li class="">Profile</li>
<li class="">Chat</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="nav_links">Notifications</a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</li>
<li class="">Settings</li>
<li class="">Log out</li>
</ul>
</div>
</div>
This setup works well on chrome and firefox:
Ok, for the versions you are using adding this CSS will fix side margins. Although, I would recommend you to use it judicially.
.container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin-right: 0px;
margin-left: 0px;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
As for the top space, it's tough to see which property is causing that, chrome debugger is not able to select that element. It might be because of incorrect code or properties like box-shadow.
Update: Found the space bug below navbar. You actually have to specify the correct height for navbar header. For me this worked:
.navbar-header {
height: 63px;
}
Related
So I had this problem for quite a while now, it has to do with the sidebar on the left because without it the white space on right side just dissapears, but I'm not sure where the problem is at, I tried looking up at other people suggestions, but nothing worked so I'm not sure what am I doing wrong, thanks!
If I add .container class to nav container, white space moves to the left side next to sidebar
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>About</li>
<li>Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<div class="container-flex d-flex" style="width: 40%">
<div class="col">
<!--main page-->
<p>Main Content</p>
</div>
</div>
<div class="container-flex d-flex" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<p>Code Editor</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can add the class .justify-content-between to the .row:
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>About</li>
<li>Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<div class="container-flex d-flex" style="width: 40%">
<div class="col">
<!--main page-->
<p>Main Content</p>
</div>
</div>
<div class="container-flex d-flex" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<p>Code Editor</p>
</div>
</div>
</div>
</div>
</body>
</html>
I want to fix my grid, right now its in the middle of page and whitespaces everywhere, what I want to do is sidebar to the side of page no margins, 2 columns next to sidebar in a row with no spaces between them so they together take over whole page which makes 3 columns together with sidebar, and navigation bar above all those 3 columns.
Html Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-4">
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="col-md-4 bg-info">hi</div>
<div class="col-md-4 bg-dark">hi</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
CSS code:
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #ffc107;
color: #000000;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #ffc107;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #000000;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #000000;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #000000;
background: #ffc107;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #e67e22;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
min-height: 100vh;
transition: all 0.3s;
}
#cont{
width: 1300px;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
I've been searching for a solution all day and tried many different things but so far, no luck. The navbar-toggle (hamburger menu) appears when reducing the window but the menu doesn't appear when clicking on the button (hamburger menu). What's particularly disturbing: the menu background is open when first loading the page.
Note that I don't call for the bootstrap.css within the header because I want to customise my components directly in my style.css file. Using Bootstrap, am I obliged to call for bootstrap.css and customise within it directly to make it work or can I just pick selected elements from bootstrap.css and copy them in style.css to make it work?
That's the html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a class="navbar-brand page-scroll" href="#page-top"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" >
<ul class="nav navbar-nav" >
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href=".contact">CONTACT</a>
</li>
<li>
<a class="page-scroll" href=".recommendations">ABOUT</a>
</li>
<li>
<a class="page-scroll" href=".work">WORK</a>
</li>
</ul>
</div>
</div>
</nav>
All the scripts are within the body at the end
<!-- JQUERY -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
And the css
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{
display: block;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
background-color: #08293C;
}
.navbar-fixed-top{
top: 0;
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.container {
margin-right: auto;
margin-left: auto;
width: 500px;
}
button{
display: none;
}
.logo {
float: left;
width: 209px;
padding-top: 2px;
height: 29px;
background: url(../images/logo.svg);
background-repeat: no-repeat;
margin-top: 6px;
}
.logo a{
width: 209px;
height: 29px;
}
.nav {
margin: 0px auto;
width: 500px;
cursor:pointer;
font-weight: 100;
font-size: 9pt;
letter-spacing: 4px;
}
nav ul {
padding:0px;
margin:0px;
cursor:pointer;
}
nav li {
display:inline;
margin-top: 23px;
margin-left:20px;
color: #FFFFFF;
float:right;
}
nav a {
color: #FFFFFF;
text-decoration: none;
display: block;
}
nav a:hover {
color: #B4C6D1;
}
ul.nav li.iconhb {display: none;}
.hidden{
display: none!important;
}
#media only screen and (max-width: 767px) {
.navbar-toggle {
display: none;
}
}
#media only screen and (max-width: 575px) {
.container{
margin-left: 5%;
margin-right: 5%;
width: auto;
}
.navbar-toggle{
position: relative;
float: right;
margin-top: 12px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar{
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar{
margin-top: 4px;
}
.navbar-toggle{
display: block;
}
button{
cursor: pointer;
}
.navbar-toggle .icon-bar{
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar{
margin-top: 4px;
}
.icon-bar{
background-color: white;
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
height: 200px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
overflow-y: visible;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
ul.nav.responsive li {
float: none;
display: inline;
}
/* hide menu display iconhb */
ul.nav li:not(:first-child) {display: none;}
ul.nav li.iconhb {
float: right;
display: inline-block;
}
/* responsive nav */
ul.nav.responsive {position: relative;}
ul.nav.responsive li.iconhb {
position: absolute;
right: 0;
top: 0;
}
ul.nav.responsive li {
float: none;
display: inline;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
}
Code below can run exactly what you want.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
How can I make a bootstrap navbar like that: Navbar
The image should be centered on the navbar.
Here is what I have currently:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html">
<img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg">
</a>
<div class="nav-collapse collapse">
<ul class="nav pull-left">
<li class="active">
Home
</li>
<li>
Pricing
</li>
<li>
FAQ
</li>
</ul>
</div>
This is the CSS that accompanies the above code:
.navbar-inner{
position:relative;
padding-left:70px;
}
.navbar .brand {
margin-left: 0px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
position: absolute;
width: 50px;
background: #f00;
left: 0px;
top: 0px;
padding: 10px;
}
That's my new code: http://www.bootply.com/gEoN0zJ3e8
How can I make the image centered?
Here's one way you can do this by using position:absolute to place your image. Depending on what you plan on doing for mobile, you'll have to adjust your navbar according (the example assumes the default Bootstrap behavior).
Working Example:
nav.navbar {
margin-top: 50px;
margin-bottom: 65px;
border: 0;
}
nav.navbar .navbar-collapse {
border: 0;
}
nav.navbar .navbar-brand {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: -50px;
transform: translateX(-50%);
padding: 0px;
}
nav.navbar .navbar-brand img {
height: 150px;
width: 150px;
margin-left: -50px;
}
#media only screen and (min-width: 768px) {
nav.navbar {
margin-top: 65px;
margin-bottom: 80px;
min-height: 20px;
height: 20px;
}
nav.navbar .navbar-nav > li > a {
font-size: 12px;
padding: 0px 10px;
}
nav.navbar .navbar-brand {
top: -65px;
}
}
#media only screen and (max-width: 767px) {
nav.navbar .navbar-nav {
margin-top: 50px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x150/b71c1c/fff?text=LOGO">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Pricing
</li>
<li>FAQ
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-info">
Content
</div>
</div>
<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>
Here is the code. Adding class to image and adding some css style. You can change position editing .imgc class properties. Enjoy
.menu-container {
background-color:#000000;
height:40px;
}
.navbar-collapse { padding: 1px 30px;}
.navbar-brand {position:absolute;margin-top:-60px;}
.navbar-collapse {
margin-top: 100px;
margin-left: 120px;
color: #fff;
}
.imgc {margin-top:-2px;}
#nav.affix {
position:fixed;
top:0;
width:100%;
z-index:10
}
#sidebar.affix-top {
position:static
}
#sidebar.affix {
position:fixed;
top:80px
}
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="menu-container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"><span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span></a> <a class="navbar-brand" href="#"><img class="imgc" alt="" src="http://placehold.it/150x150&text=Logo"></a>
<div class="navbar-collapse collapse">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
I have my logo on the left with a white background in the header but my navbar keeps going underneath this on the right. I don't understand why this is happening. Also I don't think my navbar list is going straight across.
body {
background-color: #832040;
}
.navbar-default {
width: 100%;
height: 100px;
margin: 15px 0 0;
padding: 0;
background-color: #FFF;
}
.navbar ul.nav li a {
font-family: 'Righteous', sans-serif;
font-size: 38px;
color: #000;
padding: 25px;
margin: 0;
}
.navbar ul.nav li a:hover {
background: #000;
color: #fff;
height: 40px;
}
.logo {
width: 320px;
padding: 15px;
}
<div class="navbar-default">
<div class="logo">
<img src="HairSite/KatiesKuts-Logo.png">
</div>
<div class="navbar">
<div class="navbar nav pull-right">
<ul class="nav navabar-nav">
<li>Home</li>
<li>Bio</li>
<li>Appointments</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
you have missed out some proper html structure and classes bootstrap requires.
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="logo">
<img src="HairSite/KatiesKuts-Logo.png">
</div>
</div>
<div class="navbar">
<ul class="nav nav navbar-nav navbar-right">
<li>Home</li>
<li>Bio</li>
<li>Appointments</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
you could refer the following links for further references;
Logo Nav by Start Bootstrap
Navbar example form Bootstrap
This might help or give you some ideas. You're missing some HTML and I don't believe navbar-default was a class in 2.3.2.
body,
html {
background-color: #832040;
}
.navbar .navbar-inner {
background: white;
border: none;
border-radius: 0;
}
.navbar .navbar-inner .nav > li > a {
font-family: 'Righteous', sans-serif;
font-size: 15px;
color: #000;
padding-top: 50px;
padding-bottom: 50px;
}
.navbar .navbar-inner .btn-navbar {
margin-top: 45px;
}
.navbar .navbar-inner .nav > li > a:hover {
background: #000;
color: #fff;
}
#media (max-width: 991px) {
.navbar .navbar-inner .nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">
<img src="http://placehold.it/320x100/000">
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home
</li>
<li>Bio
</li>
<li>Appointments
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>