Bootstrap navbar (left menu) not aligned properly at top - javascript

I have problems with left navigation bar positioning. If you run the snipped below on fullscreen and try to resize browser you will see that left navigation bar is not fixed to the top of page.
Also I header (logo and dropdowns) does not covers full page.
Maybe I missed something?
Any help will be highly appreciated!
Thanks, who wasted time to view this post and helped to dummy :)
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
header.navbar+nav.navbar{
/* margin-top: 20px;same margin-bottom .navbar */
}
.navbar.navbar-default.navbar-fixed-top{
margin-top: 50px;
}
.sidebar.navbar-fixed-top{
margin-top: 100px;
}
#media (min-width: 768px) and (max-width: 998px){
.navbar.navbar-default.navbar-fixed-top{
margin-top: 100px;
}
.sidebar.navbar-fixed-top{
margin-top: 150px;
}
}
/* Custom navbar default: global*/
.navbar.navbar-default{
background-color: #f8f8f8;
border-color: #e7e7e7;
margin: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-brand {
color: #666;
text-shadow: none;
min-width: 150px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a:hover{
color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a{
color: #fff;
background-color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a:hover{
color: #608224;
background-color: #acc47f;
}
.navbar.navbar-default .caret {
border-top-color: #ccc;
border-bottom-color: #ccc;
}
.navbar.navbar-default .caret:hover {
border-top-color: #333;
border-bottom-color: #333;
}
/* Custom sidebar menu */
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main{
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
#media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main{
position: absolute;
width: calc(100% - 40px); /*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main{
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a{
padding-right: 13px;
min-width: 100px;
}
/*custom sidebar nav*/
nav.sidebar ul.nav.navbar-nav{
margin: 0;
}
nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}
/*adds background on hover*/
nav.sidebar .navbar-nav > li:hover{
color: #fff;
background-color: #43600E;
}
/*removes border last element*/
nav.sidebar .navbar-nav > li.last{
border-bottom: none;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*O quanto o menu irá esconder á esquerda*/
/*gives sidebar width/height*/
nav.sidebar{
width: 200px;
height: 100%;
margin-left: -270px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover{
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate{
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
#media (min-width: 1330px) {
/* Allow main to be next to Nav
.main{
width: calc(100% - 200px); keeps 100% minus nav size
margin-left: 200px;
}
Show all nav
nav.sidebar{
margin-left: 0px;
float: left;
}
Show hidden items on nav
nav.sidebar .forAnimate{
opacity: 1;
} */
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
/*---- FIM SLIDE MENU*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
nav.navbar-findcond { background: #fff; border-color: #ccc; box-shadow: 0 0 2px 0 #ccc; }
nav.navbar-findcond a { color: #f14444; }
nav.navbar-findcond ul.navbar-nav a { color: #f14444; border-style: solid; border-width: 0 0 2px 0; border-color: #fff; }
nav.navbar-findcond ul.navbar-nav a:hover,
nav.navbar-findcond ul.navbar-nav a:visited,
nav.navbar-findcond ul.navbar-nav a:focus,
nav.navbar-findcond ul.navbar-nav a:active { background: #fff; }
nav.navbar-findcond ul.navbar-nav a:hover { border-color: #f14444; }
nav.navbar-findcond li.divider { background: #ccc; }
nav.navbar-findcond button.navbar-toggle { background: #f14444; border-radius: 2px; }
nav.navbar-findcond button.navbar-toggle:hover { background: #999; }
nav.navbar-findcond button.navbar-toggle > span.icon-bar { background: #fff; }
nav.navbar-findcond ul.dropdown-menu { border: 0; background: #fff; border-radius: 4px; margin: 4px 0; box-shadow: 0 0 4px 0 #ccc; }
nav.navbar-findcond ul.dropdown-menu > li > a { color: #444; }
nav.navbar-findcond ul.dropdown-menu > li > a:hover { background: #f14444; color: #fff; }
nav.navbar-findcond span.badge { background: #f14444; font-weight: normal; font-size: 11px; margin: 0 4px; }
nav.navbar-findcond span.badge.new { background: rgba(255, 0, 0, 0.8); color: #fff; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.0.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"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head><title>test</title>
<link type="text/css" rel="stylesheet" media="all" href="bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="all" href="nabs.css" />
<link type="text/css" rel="stylesheet" media="all" href="font-awesome.min.css" />
</head>
<body class="sidebar-mini">
<div class="main">
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<div class="nav-side-menu">
<div class="brand">logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#1" class="collapsed">
<i class="fa fa-gift fa-lg"></i> Processing </li>
<li data-toggle="collapse" data-target="#4" class="collapsed"><i class="fa fa-gift fa-lg"></i> Payments </li>
</ul>
</div>
</div>
</nav>
</aside>
<nav class="navbar navbar-findcond navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-fw fa-bell-o"></i> Invites <span class="badge">0</span>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-fw fa-tag"></i> new <span class="badge">Video</span> video</li>
<li><i class="fa fa-fw fa-thumbs-o-up"></i> <span class="badge">Music</span> liked</li>
</ul>
</li>
<li class="active">Main <span class="sr-only">(current)</span></li>
<li class="dropdown">
Admin <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>test1</li>
<li class="divider"></li>
<li>test2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section class="content-header">
<h1>
<small>hi</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section><section class="content">
<div class="row">
<div class="col-md-12">
hi there</div></div>
</section>
<table border="0" style="border: 1px; border-style: dotted;" cellspacing="0" cellpadding="0" width="100%">
<tr bgcolor="#D5E7F7">
<td width="100%">
</td>
</tr>
</table>
</div>


The black navbar has a sidebar class seems to break the functionality of the navbar.
PS: fixing this will cause the black navbar to fix to the top of the screen and be overlayed by the white navbar, if you want the black one to have precedent you'll need to up its z-index.

Related

close and open menu on click in mobile view is not working?

I have a mobile menu where user click on caret icon of sub-menus and it open and When user click again on that caret icon it should be closed but it is not working in mobile view.
body {
font-family: 'Poppins', sans-serif;
font-family: FuturaBT-Book, sans-serif;
background-color: #fff;
font-size: 16px;
color: #666;
line-height: 24px
}
.main-top {
color: white;
font-size: 24px;
margin-bottom: 0px;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
}
a.linktour:link {
color: #666666;
text-decoration: none;
}
.services-details-information .last-section li a.active {
background-color: #fc453e;
border-color: #f64c67;
color: #fff
}
.main-navigation-top {
padding: 15px 60px 15px;
}
.
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
font-size: 17px;
color: #8a623d;
}
.main-navigation-top .navbar-inverse .navbar-nav>li>a:hover,
.main-navigation-top .navbar-inverse .navbar-nav>li>a:focus {
color: #F30;
}
.main-navigation-top .navbar-inverse .navbar-brand img {
float: left;
margin-right: 15px;
position: relative;
top: -12px;
}
.main-navigation-top .navbar-inverse .navbar-brand {
font-size: 28px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
color: #000;
}
.main-navigation-top .navbar-inverse .navbar-brand span {
display: block;
font-size: 14px;
letter-spacing: 2px;
font-weight: 400;
}
.main-navigation-top .navbar-inverse .navbar-nav>.open>a,
.main-navigation-top .navbar-inverse .navbar-nav>.open>a:focus,
.main-navigation-top .navbar-inverse .navbar-nav>.open>a:hover {
background: none;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container {
position: fixed !important;
left: 0;
right: 0;
margin: auto;
box-shadow: 0 0 10px #f3f3f3;
padding: 30px 20px;
background: #fff;
z-index: 99;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container .col-lg-3 h3 {
font-size: 17px;
color: #8a623d;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul {
list-style: none;
float: left;
width: 100%;
min-height: 110px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li {
line-height: 24px;
background: url(../../img/right-arrow.png) no-repeat left top 8px;
background-size: 9px;
padding: 0px 17px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a {
color: #8a623d;
line-height: 18px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a span {
float: right;
margin-top: 3px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a:hover {
color: #F30;
}
.main-navigation-top .dropdown-menu {
background: none;
border-radius: 0;
box-shadow: none;
border: none;
}
.dropdown-menu {
width: 100%;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3 {
min-height: 260px;
padding-bottom: 20px;
}
.header-text h1 {
color: #fff;
font-size: 60px;
font-weight: 700;
text-transform: capitalize;
}
.header-text h1 span {
color: #FF9F1C;
}
.header-text p {
color: #fff;
font-size: 16px;
margin-bottom: 30px;
}
.header-search-form-area input {
display: inline-block;
}
.header-search-form-area input[type="text"] {
background: #fff;
border: none;
color: #000;
font-weight: 400;
padding: 15px;
width: 40%;
}
.header-search-form-area input[type="submit"] {
background: #FF9F1C;
border: none;
color: #fff;
font-weight: 400;
padding: 15px;
width: 10%;
}
.header-top-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px 60px 25px;
z-index: 999;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: #fff;
box-shadow: 0 0 10px #f2f2f2;
}
}
.logo {
padding-top: 20px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.logo img {
width: 150px;
}
.mainmenu .navbar-nav li {
padding: 13px 5px 12px;
}
.mainmenu .navbar-nav li a {
color: #8a623d;
text-transform: capitalize;
font-size: 17px;
padding-right: 0;
padding-left: 0;
padding: 10px 12px;
-webkit-transition: .3s;
transition: .3s;
font-weight: 400;
}
.mainmenu .navbar-nav img {
padding: 10px;
box-shadow: 0 0 10px #f2f2f2;
}
.mainmenu .navbar-nav li a:hover {
background: none;
color: #FF9F1C;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.caret {
background: url(../../img/top-arrow.png) no-repeat right;
border: none;
width: 9px;
height: 6px;
margin-left: 5px;
}
.nav li a:focus,
.nav li a:hover {
background: none;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar {
margin: 0;
}
#nav-link-hover-bg: #eeeeee;
#nav-tabs-border-color: #dddddd;
#border-radius-base: 5px;
#screen-xs-max: 767px;
//css to add hamburger and create dropdown
.nav-tabs.nav-tabs-dropdown,
.nav-tabs-dropdown {
#media (max-width: #screen-xs-max) {
border: 1px solid #nav-tabs-border-color;
border-radius: #border-radius-base;
overflow: hidden;
position: relative;
&::after {
content: "☰";
position: absolute;
top: 8px;
right: 15px;
z-index: 2;
pointer-events: none;
}
&.open {
a {
position: relative;
display: block;
}
>li.active>a {
background-color: #f5e6d7;
}
}
li {
display: block;
padding: 0;
vertical-align: bottom;
}
>li>a {
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
display: inline-block;
border-color: transparent;
&:focus,
&:hover,
&:active {
border-color: transparent;
}
}
>li.active>a {
display: block;
border-color: transparent;
position: relative;
z-index: 1;
background: #fff;
&:focus,
&:hover,
&:active {
border-color: transparent;
}
}
}
}
.nav-tabs.nav-justified>li {
width: 0px;
background: #f4f7f9;
border-right: #fff 2px solid;
}
.nav-tabs.nav-justified>li:last-child {
border: none;
}
.nav-tabs.nav-justified>li>a {
padding: 16px 26px;
border-radius: 0px;
color: #000;
border-bottom: none;
}
.nav-tabs.nav-justified>li>a:hover {
background: #f5e6d7;
border-right: #f5e6d7 1px solid;
background: url(../img/tb-arrow.png) no-repeat bottom center;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:focus,
.nav-tabs.nav-justified>.active>a:hover {
background: #f5e6d7;
border: none;
}
.megamenu .nav,
.megamenu .collapse,
.megamenu .dropup,
.megamenu .dropdown {
position: static;
}
.megamenu .container {
position: relative;
}
.megamenu .dropdown-menu {
left: auto;
}
.megamenu .megamenu-content {
padding: 15px;
}
.megamenu .megamenu-content h3 {
margin-top: 0;
color: #428bca;
font-size: 18px;
}
.megamenu .dropdown.megamenu-fw .dropdown-menu {
left: 0;
right: 0;
}
#media(min-width:120px) and (max-width:767px) {
.main-navigation-top {
padding: 15px;
}
.main-navigation-top .navbar-inverse .navbar-toggle {
border: none;
}
.main-navigation-top .navbar-inverse .navbar-toggle:focus,
.main-navigation-top .navbar-inverse .navbar-toggle:hover {
background: none;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(1) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(3) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(4) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(5) .dropdown-menu .container .col-lg-3 {
min-height: inherit;
padding-bottom: 15px
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container .col-lg-3 h3 {
margin-top: 0px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container {
position: inherit;
margin: 0 auto;
min-height: inherit;
padding: 15px 0;
}
.navbar-toggle .icon-bar {
width: 32px;
}
.main-navigation-top .carousel-inner>.item>a>img,
.main-navigation-top .carousel-inner>.item>img,
.main-navigation-top .img-responsive,
.thumbnail a>img,
.main-navigation-top .thumbnail>img {
display: none;
}
.header-top-area {
padding: 20px 15px;
}
.navbar-toggle .icon-bar {
background: #8a623d !important;
margin-top: 5px;
}
.services-details-area {
padding: 20px 15px;
}
.nav-tabs.nav-justified>li {
width: 100%;
text-align: center;
}
.nav-tabs.nav-justified>li>a {
padding: 5px 26px;
}
.mainmenu .navbar-nav li {
margin-left: 0px;
}
.caret {
float: right;
margin-top: 11px;
}
.about-services .col-lg-12 {
padding: 20px 15px;
}
.main-navigation-top .navbar-inverse .navbar-brand {
font-size: 20px;
}
.main-navigation-top .navbar-inverse .navbar-collapse,
.main-navigation-top .navbar-inverse .navbar-form {
border-top: none;
margin-top: 25px;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3 img {
display: none;
}
}
#media (min-width:767px) and (max-width:1024px) {
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
font-size: 15px;
}
.nav-tabs.nav-justified>li>a {
padding: 16px 18px;
}
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
padding: 10px 10px;
}
.mamm {
padding-left: 15px !important;
padding-right: 15px !important;
}
.main-navigation-top .carousel-inner>.item>a>img,
.main-navigation-top .carousel-inner>.item>img,
.main-navigation-top .img-responsive,
.thumbnail a>img,
.main-navigation-top .thumbnail>img {
display: none;
}
#sidebar {
display: block;
}
#media only screen and (max-width: 550px) {
#sidebar {
display: none;
}
}
#media (max-width: 550px) {
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul {
list-style: none !important;
float: none !important;
width: 100% !important;
min-height: 60px !important;
}
h2 {
font-size: 20px;
}
.menuleftbar2 {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-navigation-top">
<div class="row">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<img src="https://www.die-aethiopienreise.de/img/menu-bar.png" width="78">
</button>
<a class="navbar-brand" href="/index.html"> B <span>Studi</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0px;">
<ul class="nav navbar-nav">
<li class="dropdown megamenu">
Äthiopien Reisen <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-3">
<h3 style="margin-top:-1px;">Stud</h3>
<ul>
<li>Äthiopien Intensiv <span>24 Tage</span> </li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Äthiopien Informationen<span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-3">
<h3>Reiseinformationen</h3>
<ul>
<li>Wissenwertes</li>
<li>Reisewetter</li>
</ul>
</div>
<div class="col-lg-3">
<h3>Landesinformationen</h3>
<ul>
<li>Nationalparks</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Katalog <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-2">
<ul>
<li>KatalogDownload</li>
<li>Katalogbestellung</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Kontakt <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-2">
<ul>
<li>Kontakt</li>
<li>Reiseanmeldung</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
</ul>
</div>
</nav>
</div>
</div>
drop-down will open now again when user click on the icon it should be closed but it is not working as expected!

Responsive Hamburger Menu via jQuery

I am new to coding and am struggling to get the template for my nav menu ready. First of all, I want the hamburger to hide whenever I click on it and then the menu opens. However, I'm still at the beginning, and can't even get the hamburger to hide. I want to toggle the class ".hamburger-hide" using jQuery, which includes the display:none property.
this is the html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#800&display=swap" rel="stylesheet">
<title>Navbar</title>
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact Us</li>
<li class="nav-item">Links</li>
</ul>
</nav>
<div class="btn">
<a class="cta" href="#"><button>Hello World</button></a>
</div>
<img class="hamburger" src="speisekarte.svg" alt="hamburger-menu">
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
this is my CSS:
*{ /*Setting all to 0*/
padding:0;
margin:0;
box-sizing: border-box; /*If you set box-sizing: border-box; on an element, padding and border are included in the width and height*/
}
header {
display: flex; /* Das ist der Flex container (header) in ihm müssen items positioniert werden*/
justify-content: space-between; /*justify-content + align-itmes = center ==> perfect center*/
align-items: center;
background-color: #707070;
padding: 30px 10%;
}
.logo {
font-family: "Montserrat", sans-serif;
font-weight: 800;
cursor: pointer;
}
button {
cursor: pointer;
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1); /* letzter ist alpha --> opacity, 1 = 100%*/
border: none;
border-radius: 50px;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.7); /* alpha ändert sich beim hovern --> opacity nimmt ab, 0,7 = 70%*/
text-decoration: none;
}
.btn a {
text-decoration: none;
}
.nav-item {
list-style: none;
}
.nav-item {
display: inline-block; /* ul ist in reihe nicht untereinander. kann auch direkt an li gemacht werden*/
padding: 0px 30px;
}
.navbar li a {
transition: all 0.3s ease 0s; /*letzter wert= delay, ease-in-out= vorwärts und rückwärts*/
}
.navbar li a:hover {
color: #0088a9;
}
.nav-item a, button{
text-decoration: none;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: normal;
}
.hamburger {
height:40px;
cursor: pointer;
position:relative;
}
.hamburger:hover {
padding:2px;
border: 2px solid;
border-radius: 5px;
}
.hamburger-hide {
display:none;
}
#media (max-width: 768px){
.nav-list{
display: none;
}
.cta {
display: none;
}
}
#media (min-width:769px){
.hamburger{
display:none;
}
}
and this is the jQuery I tried, so that it hides on click.
$(".hamburger").click(function(){
$(".hamburger").toggleClass(".hamburger-hide");
})

Solution with jQuery for build up Hamburger navbar responsive
For my example:
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery);
#charset "UTF-8";
body{
margin:0;
}
.navigation {
height: 70px;
background: #6d7993;
font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0.88;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #6d7993;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #4b5569;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #6d7993;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Contact Us
</li>
<li>
Link
</li>
</ul>
</ul>
</nav>
</div>
</section>
Updated
Solution 2, Using Pure CSS
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Your Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Me</li>
</ul>
</header>

Here you go:
https://jsfiddle.net/ap2rzb5x/1/
$("#hamburger").click(function(){
$("#hamburger").toggleClass("hamburger-hide");
$("#hamburger").toggleClass("hamburger");
})
Summary you toggled just that one class, didn't want you maybe switch them (toggle the original hamburger class away?). Just in case I matched on the ID instead of the class so I could toggle away the original hamburger and still be able to match it with the same code.
Another problem is that you toggled '.hamburger-hide' that's not the class name, it's called 'hamburger-hide' the dot is only used by jQuery as the dollar search. Same with #hamburger, it will find ID of hamburger not #hamburger-hide.
https://api.jquery.com/category/selectors/
Probably it's not exactly doing what you want, but I think it should unstuck you and you should be able to continue making what you intend to do.

Issues with using Active class in Bootstrap

Currently, the ‘Active’ class is seen on the FAQ and it creates a misleading impression Example. As of now, the hovering still exists in White. I want to achieve where An active element will be in White and display accordingly when the user clicks Example. I have provided my .html and .css, however, the provided snippet output is inaccurate. Please use your preferred software such as Visual Studio, etc. Thank you.
/*
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;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#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 {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/Content/mainCSS.css" />
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<!-- -->
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-image"></i>
Portfolio
</a>
</li>
<li class="active">
<a href="#">
<i class="fas fa-question"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paper-plane"></i>
Contact
</a>
</li>
</ul>
<!-- -->
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<!-- Sidebar 1 -->
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Minimise Sidebar</span>
</button>
</div>
</nav>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
Update 1
The following result is correct https://ibb.co/phP4c8d, however how do I make it White for the remaining elements? It's something like this https://codepen.io/gearmobile/pen/bByZdG. Correct me if I'm wrong but I believe it requires a JavaScript.

i dont know if i understood your question but i think what you want is this,
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #6d7fcc;
background: #fff;
}

How can change the position of logo in this Navigation bar?

Ok guys so i have this template with me. But i can't figure out how to shift the position of logo to left and the menu accordingly. I also want to change the background color to white.. I'm able to do the rest of the changes myself..
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap > header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu > li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu > li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu > li.parent > a {
padding-left: 14px;
}
#main-menu > li > a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu { /* level 2 */
display: none;
left: 0px;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
}
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu > li > a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu > li > a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu > li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu > li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu > li:last-child > a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu > li > a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover > ul.sub-menu {
display: block; /* show the submenu */
}
The CSS Responsive Style
#media all and (max-width: 700px) {
#navigation {
position: static;
margin-top: 20px;
}
#menu-toggle {
display: block;
}
#main-menu {
display: none;
float: none;
}
#main-menu li {
display: block;
margin: 0;
padding: 0;
}
#main-menu > li {
margin-top: -1px;
}
#main-menu > li:first-child {
margin-top: 0;
}
#main-menu > li > a {
background-color: #333;
border: 1px solid #444;
color: #bbb;
display: block;
font-size: 14px;
padding: 12px !important;
padding: 0;
}
#main-menu li > a:hover {
background-color: #444;
}
#main-menu > li.parent {
background: none !important;
padding: 0;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
border: 1px solid #444 !important;
color: #fff !important;
}
ul.sub-menu {
display: block;
margin-top: -1px;
margin-left: 20px;
position: static;
padding: 0;
width: inherit;
}
ul.sub-menu > li:first-child {
border-top: 1px solid #444 !important;
}
ul.sub-menu > li > a.parent {
background: #333 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="https://www.freshdesignweb.com"><img src="images/logo.png" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</div>

At first you have to change for web view bellow css code for left position for nav. Also logo should be remove otherwise logo & menu overlap if you want to logo is left position.
#navigation {
position: absolute;
left: 40px;
bottom: 0px;
}
Also you want to change your menu bar background color then change to this css code
#wrap > header {
background-color: #fff;
}
Note: If you do that you should be change your menu font color like black otherwise your font menu font color & menu background color looking messy.

Bootstrap sidebar and page content are merged

I am attempting to use a bootstrap sidebar which on smaller screens becomes horizontal navigation. Everything is working fine except for Page content (which has to be on right side of sidebar) appears on top of sidebar.
JS Fiddle
My code:
.nav-side-menu {
overflow: auto;
font-family:'Montserrat', sans-serif;
font-size: 12px;
font-weight: 200;
background-color: #FFF;
position: fixed;
top: 0px;
width: 250px;
height: 100%;
color: #000;
border-right:solid 1px black;
}
.nav-side-menu .brand {
background-color: #FFF;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.logoimg {
width: 70%;
margin-top: 20px;
background: url('logomedium.png');
background-size: 200px 133px;
height: 133px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left:20px;
background-position: center;
margin-bottom: 80px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #eeeeee;
background-color: #eeeeee;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #eeeeee;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
text-align: center;
/*border-left: 3px solid #2e353d; */
padding-bottom: 15px;
padding-top: 15px;
/*border-bottom: 1px solid #23282e;*/
}
.nav-side-menu li a {
text-decoration: none;
font-size:12pt;
color: #000000;
text-transform: uppercase;
vertical-align: middle;
}
.nav-side-menu li a {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li a:focus {
outline: 0;
}
.nav-side-hr {
width: 75%;
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
.nav-side-menu li:hover {
/*border-left: 3px solid##eeeeee;*/
background-color: #eeeeee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.logoimg {
margin-top: 10px;
background: url('logohorizontal.png');
background-size: 200px 48px;
height: 48px;
margin-bottom: 10px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left: 5px;
background-position: center;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #AF2024;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
border-bottom: 1px solid black;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<div id="wrapper">
<!-- Sidebar -->
<div class="nav-side-menu">
<div class="brand"><div class="logoimg" />LOGO PLACEHOLDER</div></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class=""></i> About Us
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed">
<i class=""></i> Services
</li>
<li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
</li>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class=""></i> Contact us
</li>
<li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
</li>
<hr class="nav-side-hr" />
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class=""></i> RATES
</li>
<li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
</li>
<li>
<a href="#">
<i class=""></i> TRACKING SYSTEM
</a>
</li>
<li>
<a href="#">
<i class=""></i> QUOTE ME
</a>
</li>
<hr class="nav-side-hr" />
<li>
<a href="#">
<i class=""></i> FIND US
</a>
</ul>
</div>
</div>
<!-- End Sidebar -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div>
</div>
</div>
</div>
UPDATE: As suggested added padding to page-wrapper, but when I add text to page content, sidenav links stop working/hovering.
JS FIDDLE https://jsfiddle.net/y3eL6m8v/4/

In the media query you should add a padding-left with the value of the width from the sidenav to the page-content-wrapper class.
#media(min-width:768px) {
#page-content-wrapper {
padding-left: 250px;
position: relative;
}
}
Click here for a jsfiddle

Please add this in your css:
#media (min-width: 768px)
{
#page-content-wrapper
{
padding: 20px 20px 20px 250px;
position: relative;
}
}
Check this fiddle https://jsfiddle.net/y3eL6m8v/2/

Categories