I want to make my dropdown menu like in the image below. The problem is when I hover on the second item of main menu, the submenu leaves a margin from top as shown on left hand side of picture. I do not want that empty space. I want the submenu to always show on the same size and position for all the main menu options which have a submenu.
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:0px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu > a:after {
content: " ";
display: block;
float: right;
height: 0;
margin-right: -1px;
margin-top: 5px;
width: 190px;
padding-left:10px;
}
#abg > li > a:hover, #abg > .active > a:hover {
text-decoration: none;
background-color:#49b3e7;
padding-top:15px;
padding-bottom:20px;
}
#media (max-width: 767px) {
.navbar-nav {
display: inline;
}
.navbar-default .navbar-brand {
display: inline;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-nav .dropdown-menu > li > a {
color: red;
background-color: #ccc;
border-radius: 4px;
margin-top: 2px;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: #ccc;
}
.navbar-nav .open .dropdown-menu {
border-bottom: 1px solid white;
border-radius: 0;
}
.dropdown-menu {
padding-left: 10px;
}
.dropdown-menu .dropdown-menu {
padding-left: 20px;
}
.dropdown-menu .dropdown-menu .dropdown-menu {
padding-left: 30px;
}
li.dropdown.open {
border: 0px solid red;
}
}
#media (min-width: 768px) {
ul.nav li:hover > ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar">
<nav class="navbar navbar-default navbar-fixed-top hidden-xs " role="navigation" style="background-color:#49b3e7;color:white;margin-top:50px;cursor:pointer">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown" style="cursor:pointer">
<span class="dropdown-toggle" data-toggle="dropdown" style="color:white;cursor:pointer;">All Products </span><span class="caret" style="color:white;cursor:pointer;"></span>
<ul class="dropdown-menu" id="abg">
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Grocery</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li>Meals & Prep</li>
<li>Spreads & Sweeteners</li>
<li>Breafast</li>
<li>Salty Snacks</li>
<li>Chocolate & Candy</li>
<li>Condiments & Spices</li>
<li>Fruits & Nuts</li>
<li>Cookies & Bars</li>
<hr>
<li>Shop All Grocery</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Dole-licious </br>Snacks </h3>
<img src="grocery1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Beverages</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li>Coffee & Tea</li>
<li>Dairy</li>
<li>Jucies</li>
<li>Mixes</li>
<li>Sports & Energy</li>
<li>Water & Sparkling</li>
<hr>
<li>Shop All Beverages</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-61px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:77px;margin-top:163px;"> Flavorful</br> fun made </br>easy</h3>
<img src="beverages1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Bath & Body</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Deodorants</li>
<li>Hand Soaps</li>
<li>Shaving</li>
<li>Shower</li>
<li>Skin Care</li>
<hr>
<li>Shop All Bath & Body</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-116px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Would you </br>Lather </h3>
<img src="bath&body1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Health</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Ladies</li>
<li>Dental & Eye</li>
<li>Relief</li>
<li>Supplements</li>
<li>Adult Care</li>
<hr>
<li>Shop All Health</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-171px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;">Picture of </br>Health </h3>
<img src="health.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Cleaning Supplies</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Surface Cleaners</li>
<li>Paper & Plastic</li>
<li>Laundry</li>
<li> Dish Soaps</li>
<li>Air & Fresheners</li>
<hr>
<li>Shop All Cleaning Supplies</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-226px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> So Fresh </br>and Clean </h3>
<img src="cleaning.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Home & Office</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Stationery</li>
<li>Appliances & Tools</li>
<li>Tabletop & Storage</li>
<hr>
<li>Shop All Home & Office</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-281px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Lock in the </br>freshness </h3>
<img src="home.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Babies & Kids </span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Care & Cleaning</li>
<li>Diapers & Wipes</li>
<li>Nutrition</li>
<hr>
<li>Shop All Babies & Kids</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-336px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Baby got </br> Bath </h3>
<img src="baby.png" class="img-responsive"></a>
</ul>
</li>
<li>Lifestyle<span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color: rgba(255, 255, 255, .1);"></span></li>
<li>Pets <span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color:rgba(255, 255, 255, .1);"></span></li>
<li>Shop All Products <span class="glyphicon glyphicon-chevron-right" style="margin-left:100px;color:rgba(255, 255, 255, .1);"></span></li>
</ul>
</li>
<li>Best Sellers</li>
<li>What's New</li>
<li>On Sale</li>
<li>Samples</li>
</ul>
</div>
</nav>
</div>
You have to add position: static and top: 0 in CSS.
.dropdown-submenu {
position: static;
top: 0;
left: 100%;
}
Add this to your CSS:
.dropdown-submenu {
position: static;
}
This places your submenu dropdowns relative to your main dropdown menu.
Related
I'm trying to create a hover menu. on hover of it a triangular shape appears in the menu items. But when I go to the dropdown menu, it disappears.
.navbar-wrapper .col-lg-8 ul li a:hover{
color:#f1c575
}
.navbar-brand img{
padding-top:10px;
padding-bottom:10px;
}
.navbar{
position:relative;
}
.navbar:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 12.5px 0 12.5px;
border-color: #fff transparent transparent transparent;
left: 55px;
top: 99%;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
-webkit-transition: -webkit-transform 337ms ease-in-out;
transition: -webkit-transform 337ms ease-in-out;
transition: transform 337ms ease-in-out;
transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out;
}
nav .navbar-nav .nav-item .nav-link{
line-height:59px;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
transition: background-color 1s;
}
nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{
background-color: #f1c575;
}
nav ul li:hover > .nav-link {
background-color: #f1c575;
color: #FFF;
}
nav .navbar-nav .nav-item .nav-link {
position: relative;
}
nav .navbar-nav .nav-item .dropdown:before {
content: "";
display: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #7B8B93;
position: absolute;
left: 35%;
bottom: 0px;
}
/* Navbar Ends */
/* Nav Menu Starts */
.dropdown-content {
display: none;
position: absolute;
background-color: #7b8b93;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
nav ul li .dropdown:hover .dropdown-content {
display: block;
}
.dropdown{
position: initial;
}
.nav-link:hover + .dropdown .dropdown-content{
display: block;
}
.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
display: block!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="./images/Cnetric_High-Res_Logo.png" width="160px" height="65px"
alt="Cnetric Company Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<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="#">Capabilities</a>
<div class="dropdown d-none d-md-block">
<div class="dropdown-content py-5">
<div class="row">
<div class="col-lg-4 open-source">
<h3 class="ml-4 menu-text">Products</h3>
<p class="ml-3"><a class="ml-2" href="#">Magento</a></p>
<p class="ml-3"><a class="ml-2" href="#">IBM v9 Commerce</a></p>
<p class="ml-3"><a class="ml-2" href="#">Drupal</a></p>
</div>
<div class="col-lg-8 services">
<h3 class="menu-text ml-5">Product Categories</h3>
<ul class="list-categories">
<li class="one">
<a href="#" title="E-Commerce">
<img class="make-white" src="./images/aoe_icons_services_order_management.svg"
alt="E-Commerce">
<span class="service-title">E-Commerce</span>
</a>
</li>
<li class="two">
<a title="Content Management" href="#">
<img class="make-white" src="./images/aoe_icons_webportal.svg"
alt="Content Management">
<span class="service-title">Content Management</span>
</a>
</li>
<li class="three">
<a title="Middleware & ESB" href="#">
<img class="make-white" src="./images/Plattform1.svg" alt="Middleware & ESB">
<span class="service-title">Middleware & ESB</span>
</a>
</li>
<li class="one">
<a title="Search & Recommendation" href="#">
<img class="make-white" src="./images/Search2.svg" alt="Search & Recommendation">
<span class="service-title">Search & Recommendation</span>
</a>
</li>
<li class="three">
<a title="Identity & Access Management" href="#">
<img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity">
<span class="service-title">PIM Systems</span>
</a>
</li>
<li class="three">
<a title="Identity & Access Management" href="#">
<img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity & Access Management">
<span class="service-title">Identity & Access Management</span>
</a>
</li>
<li class="one">
<a title="Development Frameworks" href="#">
<img class="make-white" src="./images/aoe_icons_betrieb.svg" alt="Development Frameworks">
<span class="service-title">Development Frameworks</span>
</a>
</li>
<li class="two">
<a title="CRM Systems" href="#">
<img class="make-white" src="./images/aoe_icons_crm_2.svg" alt="CRM Systems">
<span class="service-title">CRM Systems</span>
</a>
</li>
<li class="three">
<a title="Databases & Storage" href="#">
<img class="make-white" src="./images/aoe_icons_Effiziente_Datenverwaltung.svg"
alt="Databases & Storage">
<span class="service-title">Databases & Storage</span>
</a>
</li>
<li class="one">
<a title="Mobile Frameworks" href="#">
<img class="make-white" src="./images/aoe_icons_mobile-02.svg"
alt="Mobile Frameworks">
<span class="service-title">Mobile Frameworks</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Solutions</a>
<div class="dropdown d-none d-md-block">
<div class="dropdown-content py-5">
<div class="row">
<div class="col-lg-4 open-source">
<h3 class="ml-4 menu-text">Open Source Solution Suites</h3>
<p class="ml-3 commerce"><a class="ml-2" href="#">Dr.Commerce</a></p>
<p class="ml-3 universal"><a class="ml-2" href="#">Universal Commerce</a></p>
<p class="ml-3 emmerging"><a class="ml-2" href="#">Emmerging Techlogies</a></p>
</div>
<div class="col-lg-8 services">
<h3 class="menu-text ml-5">Services & Technologies</h3>
<ul class="list-categories">
<li class="one">
<a href="#" title="E-Commerce">
<img class="make-white"
src="./images/Strategy2.svg">
<span class="service-title">Strategy & Consulting</span>
</a>
</li>
<li class="two">
<a title="Content Management" href="#">
<img class="make-white"
src="./images/Design1.svg">
<span class="service-title">UX & Design</span>
</a>
</li>
<li class="three">
<a title="Middleware & ESB" href="#">
<img class="make-white"
alt="Software Architecture" src="./images/aoe_icons_Software_Architektur.svg">
<span class="service-title">Software Architecture</span>
</a>
</li>
<li class="one">
<a title="Search & Recommendation" href="#">
<img class="make-white"
src="./images/aoe_icons_betrieb.svg">
<span class="service-title">Agile Development</span>
</a>
</li>
<li class="two">
<a title="PIM Systems" href="#">
<img class="make-white" alt="Digital Products"
src="./images/Digitization2.svg">
<span class="service-title">Digital Products</span>
</a>
</li>
<li class="three">
<a title="Identity & Access Management" href="#">
<img class="make-white"
alt="Payment & Fulfillment" src="./images/aoe_icons_services_payment.svg">
<span class="service-title ng-binding">Payment & Fulfillment</span>
</a>
</li>
<li class="one">
<a title="Development Frameworks" href="#">
<img class="make-white" alt="Systems Integration"
src="./images/Integration1.svg">
<span class="service-title ng-binding">Systems Integration</span>
</a>
</li>
<li class="two">
<a title="CRM Systems" href="#">
<img class="make-white"
alt="DevOps & Operations" src="./images/aoe_icons_Continuous_Deployment.svg">
<span class="service-title ng-binding">DevOps & Operations</span>
</a>
</li>
<li class="three">
<a title="Databases & Storage" href="#">
<img class="make-white" alt="Customer Care"
src="./images/aoe_icons_Customer_Care.svg">
<span class="service-title ng-binding">Customer Care</span>
</a>
</li>
<li class="one">
<a title="Mobile Frameworks" href="#">
<img class="make-white" src="./images/aoe_icons_mobile-02.svg"
alt="Mobile Frameworks">
<span class="service-title">Mobile Frameworks</span>
</a>
</li>
<li class="two">
<a title="Portal" href="#">
<img class="make-white" alt="Portals & Applications" src="./images/aoe_icons_web_and_mobile_applications.svg">
<span class="service-title">Portals & Applications</span>
</a>
</li>
<li class="three">
<a title="CMS Solutions" href="#">
<img class="make-white" alt="CMS Solutions" src="./images/aoe_icons_web_content_management.svg">
<span class="service-title">CMS Solutions</span>
</a>
</li>
<li class="one">
<a title="Middle Ware" href="#">
<img class="make-white" alt="ESB & Middleware" src="./images/Plattform1.svg">
<span class="service-title">ESB & Middleware</span>
</a>
</li>
<li class="two">
<a title="CRM Integration" href="#">
<img class="make-white" alt="CRM Integration" src="./images/aoe_icons_crm_2.svg">
<span class="service-title">CRM Integration</span>
</a>
</li>
<li class="three">
<a title="Identity" href="#">
<img class="make-white" src="./images/aoe_icons_technologies_IRM.svg">
<span class="service-title">Identity & Access Mngmt</span>
</a>
</li>
<li class="one">
<a title="Search" href="#">
<img class="make-white" alt="Search" src="./images/Search2.svg">
<span class="service-title">Search</span>
</a>
</li>
<li class="two">
<a title="E-Commerce" href="#">
<img class="make-white" alt="E-Commerce" src="./images/aoe_icons_services_order_management.svg">
<span class="service-title">E-Commerce</span>
</a>
</li>
<li class="three">
<a title="Mobile Apps" href="#">
<img class="make-white" alt="Mobile Apps" src="./images/aoe_icons_web_and_mobile_applications.svg">
<span class="service-title">Mobile Apps</span>
</a>
</li>
<li class="one">
<a title="PIM Systems" href="#">
<img class="make-white" alt="PIM Systems" src="./images/aoe_icons_technologies-13.svg">
<span class="service-title">PIM Systems</span>
</a>
</li>
</ul>
<p class="text-center mt-4"><a class="btn btn-custom">View All</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
I have tried using after and before. Once I go to the dropdown menu, the triangular shape disappears from the menu item above. I have tried multiple hover classes but it's not helping me. Can somebody please help me to fix this.
Use nav .navbar-nav .nav-item .dropdown:before instead nav .navbar-nav .nav-item .nav-link:hover:after
WHY?
In your code you want to target parent on hover child what impossible in css.
to solve it make shape in child then you can target it on hover child and also showon hover parent
Also show it on:
.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
display: block!important;
}
See working code
.navbar-wrapper .col-lg-8 ul li a:hover{
color:#f1c575
}
.navbar-brand img{
padding-top:10px;
padding-bottom:10px;
}
.navbar{
position:relative;
}
.navbar:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 12.5px 0 12.5px;
border-color: #fff transparent transparent transparent;
left: 55px;
top: 99%;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
-webkit-transition: -webkit-transform 337ms ease-in-out;
transition: -webkit-transform 337ms ease-in-out;
transition: transform 337ms ease-in-out;
transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out;
}
nav .navbar-nav .nav-item .nav-link{
line-height:59px;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
transition: background-color 1s;
}
nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{
background-color: #f1c575;
}
nav ul li:hover > .nav-link {
background-color: #f1c575;
color: #FFF;
}
nav .navbar-nav .nav-item .nav-link {
position: relative;
}
nav .navbar-nav .nav-item .dropdown:before {
content: "";
display: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #7B8B93;
position: absolute;
left: 35%;
bottom: 0px;
}
/* Navbar Ends */
/* Nav Menu Starts */
.dropdown-content {
display: none;
position: absolute;
background-color: #7b8b93;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
nav ul li .dropdown:hover .dropdown-content {
display: block;
}
.dropdown{
position: initial;
}
.nav-link:hover + .dropdown .dropdown-content{
display: block;
}
.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
display: block!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<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="#">Capabilities</a>
<div class="dropdown">
<div class="dropdown-content py-5">
<div class="row">
<div class="col-lg-4 open-source">
<h3 class="ml-4 menu-text">Products</h3>
<p class="ml-3"><a class="ml-2" href="#">Magento</a></p>
<p class="ml-3"><a class="ml-2" href="#">IBM v9 Commerce</a></p>
<p class="ml-3"><a class="ml-2" href="#">Drupal</a></p>
</div>
<div class="col-lg-8 services">
<h3 class="menu-text ml-5">Product Categories</h3>
<ul class="list-categories">
<li class="one">
<a href="#" title="E-Commerce">
<img class="make-white" src="./images/aoe_icons_services_order_management.svg" alt="E-Commerce">
<span class="service-title">E-Commerce</span>
</a>
</li>
Why is my navbar text not on the same line for the "front end web developer" and my pages text. How can I make it appear on the same line?
As you can see in the screenshot, it currently looks like this https://ibb.co/jkd0LS. I want the text to be all on the same line.
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
});
.navbar {
border-bottom: 0.04rem solid #111;
background-color: ;
display: none;
}
nav ul li a {
color: rgb(65, 47, 47);
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
text-transform: uppercase;
}
nav ul li a:hover {
text-decoration: underline;
color: #000;
}
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
Here is all my website code, I uploaded it to GitHub
The display: flex !important; on your #navbar7 is making it go full width. You could change it to display: inline-flex; but it probably just easier to make it float: right;.
#navbar7 {
float: right;
}
See this fiddle for an example (at a wider viewport than the SO code sample).
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
});
body { height: 200vh; }
#navbar7 {
float: right;
}
.navbar {
border-bottom: 0.04rem solid #111;
background-color: ;
display: none;
}
nav ul li a {
color: rgb(65, 47, 47);
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
text-transform: uppercase;
}
nav ul li a:hover {
text-decoration: underline;
color: #000;
}
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="features-icons bg-light" id="features-icons">
<div class="container">
<h2 class="mb-5 text-center">What You Can Expect</h2>
<hr class="black">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="far fa-lightbulb m-auto text-primary"></i>
</div>
<h3 class="text-center">Ideas</h3>
<p class="lead mb-0 text-justify">I collaborate with clients and peers to nurture and transform ideas into well thought out design specs. After all, that's where the majority of amazing user experiences start.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="fa fa-magic m-auto text-primary"></i>
</div>
<h3 class="text-center">UX/UI</h3>
<p class="lead mb-0 text-justify">I sketch and wireframe interfaces focusing on content structure, intuitive UI patterns and simple interactions. I'm a minimalist who truly believes that less is more.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="fas fa-code m-auto text-primary"></i>
</div>
<h3 class="text-center">Coding</h3>
<p class="lead mb-0 text-justify">I design in the browser with HTML(5), CSS(3) and a touch of JavaScript. I love coding things from scratch, but I can work with front-end frameworks like Bootstrap too.</p>
</div>
</div>
</div>
</div>
</section>
I dont know why is this not working ? I am trying to make a drop down menu and when I hovering over in the page it work but if i hovered in the linke it dosn't work In short, this drop-down list does the opposite
i need fix or a better way for this drop down menu
enter image description here
enter image description here
Html
<body>
<div class="wrap">
<nav class="navbar navbar-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>
Css
.navbar-R-C:hover {
color: white !important;
}
.content {
color: White !important;
}
.dropdown-menu {
min-width: 250px;
max-width: 250px;
text-align: center;
background-color: #3E606F;
margin-top: -6px !important;
color: white !important;
border-radius: 15px !important;
}
.dropdown-menu > li > a:hover {
text-align: center;
background-color: #EC407A;
font-weight: bold;
margin-left: 7px !important;
margin-right: 7px !important;
display: inline-block;
color: White;
border-radius: 10px !important;
}
.dropdown-menu:after {
position: absolute;
margin-left: 210px;
top: -6px;
left: -30px;
border-right: 10px solid transparent;
border-bottom: 10px solid #3E606F;
border-left: 10px solid transparent;
content: '';
}
.dropdown:hover .dropdown-menu {
display: block;
}
JS
$(document).ready(function() {
$('.wrap nav ul li').hover(function() {
// Toggles slide but stops if not hover anymore
$(this).find('ul').stop().slideToggle();
// Toggles on and of the active class (triangle)
$(this).find('div').toggleClass('active');
}
);
}
);
Use this. it contains your code but some css are override by bootstrap css so you have to override bootstrap css to look like what you want. and the new thing is bootstrap.css, bootstrap.js and jquery.js dont forget to include these file here it loads directly from web you can download and link these file for offline use.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.2.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-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
</body>
</html>
I am coding a side menu with Bootstrap and I am already on quite a good stage. The submenus are opening.
My problem: If I click on one submenu it shows the sub links but when opening a second one it doesn't open that links. So I searched for a solution and found this one: Stackoverflow Answer. I adjusted the code and the javascript file to the changes. Now when opening the menu on my localhost installation, it lags a bit when opening or closing but it is closing all others which are opened. So I thought of asking if anyone here has a better solution or an idea why it lags that much. The code is very long so I will just post a JSfiddle: klick here.
From jQuery doc:
.slideToggle(): default duration 400 milliseconds
.toggle(): default duration 400 milliseconds
Those are your issues. In any case you can always use boostrap collapse methods.
//
// for each collapseable element, except the first, collapse (hide)
//
$('#side-menu ul.collapseable:visible:not(:first)').collapse('hide');
//
// clicking on the collapse anchor:
// get the css selector for the collapsible element
// collapse to hide all except the current one
// collapse to show the current one
//
$('#side-menu a[data-toggle="collapse"]').on('click', function (e) {
var ulId = this.getAttribute('href');
$('#side-menu ul.collapseable').not(ulId).collapse('hide');
$(ulId).collapse('show');
});
html, body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eaeaea;
color: #5e6062;
height: 100%;
}
/*-------------*/
/*Sidebar Menue*/
/*-------------*/
#side-menu {
background-color: #323232;
padding: 0px;
}
#side-menu h1 {
color: #fff;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
#side-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#side-menu a {
padding: 12px 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 13px;
display: block;
}
#side-menu a:hover {
background-color: #474747;
display: block;
color: #fff;
}
#side-menu .active a {
color: #fff;
background-color: #474747;
}
#side-menu .settings-btn {
background-color: #778b1c;
}
#side-menu .settings-btn a {
color: #fff;
}
#side-menu .settings-btn a:hover {
background-color: #778b1c;
}
#side-menu .collapseable li {
padding: 2px 0px 2px 12px;
}
#side-menu .collapseable a {
color: #fff;
font-size: 12px;
padding: 0px 10px 0px 5px;
text-decoration: none;
display: block
}
#side-menu .collapseable a:hover {
color: #fff;
}
/*ALTIS Side-Menü linker Rand*/
#side-menu .collapseable-ALTIS {
border-left: 4px solid #ffb700;
}
#side-menu .collapseable-ALTIS .active {
background-color: #474747;
}
#side-menu .collapseable-ALTIS .link:hover {
background-color: #474747;
}
/*---------------------------*/
/*TANOA Side-Menü linker Rand*/
#side-menu .collapseable-TANOA {
border-left: 4px solid #00aa1a;
}
#side-menu .collapseable-TANOA .active {
background-color: #474747;
}
#side-menu .collapseable-TANOA .link:hover {
background-color: #474747;
}
/*---------------------------*/
/*--------------------*/
/*Main Content Bereich*/
/*--------------------*/
.display-table {
display: table;
padding: 0px;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
float: none;
height: 100%;
}
/*----------------*/
/*Top Menue Leiste*/
/*----------------*/
#nav-header {
background-color: #fff;
border-bottom: 1px solid #e7eaec;
}
#nav-header ul {
margin: 0px;
padding: 0px;
list-style: none;
color: #676a6c;
}
#nav-header ul li {
float: left;
margin-left: 15px;
padding: 17px 0px;
}
#nav-header ul a {
text-decoration: none;
}
#nav-header .logout {
color: #676a6c;
}
#nav-header .logout:hover {
color: #676a6c;
}
#nav-header #welcome {
margin-right: 20px;
}
/*-----------------------*/
/*Mobile Menu Toggle Icon*/
/*-----------------------*/
.navbar-default .navbar-toggle {
border-color: #778b1c;
background-color: #778b1c;
}
.navbar-default .navbar-toggle:hover {
background-color: #778b1c;
}
.navbar-default .navbar-toggle:focus {
background-color: #778b1c;
}
.navbar-default .icon-bar {
border: 1px white solid;
}
/*------*/
/*Inhalt*/
/*------*/
#content header {
border-bottom: 1px #f3f3f4 solid;
padding: 10px 0px;
}
#content {
margin: 20px 0px 50px 0px;
background-color: #fff;
border-top: 4px #778b1c solid;
}
.content-ALTIS {
border-top: 4px #ffb700 solid !important;
}
.page_title {
font-size: 14px;
font-weight: bold;
margin: 0px 20px;
}
.content-inner {
padding: 20px;
}
.content-inner a {
text-decoration: underline;
color: #2b5f8b;
}
.valign-top {
vertical-align: top;
}
.valign-center {
vertical-align: middle;
}
.horizontal-middle {
margin: 0px auto;
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="container-fluid display-table">
<!-- Menu -->
<div class="col-lg-2 c display-table-cell valign-top" id="side-menu">
<!-- Logo -->
<ul>
<!-- Startseite -->
<li class="link active">
<a href="#">
<i class="fa fa-fw fa-home" aria-hidden="true"></i>
Text 1
</a>
</li>
<!-- ALTIS Dropdown Menu -->
<li class="link">
<a href="#collapse-ALTIS" data-toggle="collapse" aria-controls="collapse-ALTIS" id="ALTIS"
href="#collapse-ALTIS" aria-expanded="true">
Text 2
</a>
<ul class="collapseable collapseable-ALTIS collapse in" id="collapse-ALTIS" aria-expanded="true">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- TANOA Dropdown Menu -->
<li class="link">
<a href="#collapse-TANOA" data-toggle="collapse" aria-controls="collapse-TANOA" id="TANOA">
Text 3
</a>
<ul class="collapse collapseable collapseable-TANOA" id="collapse-TANOA">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- KOTH Dropdown Menu -->
<li class="link">
<a href="#collapse-KOTH" data-toggle="collapse" aria-controls="collapse-KOTH" id="KOTH">
Text 4
</a>
<ul class="collapse collapseable collapseable-KOTH" id="collapse-KOTH">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- TOOLS Dropdown Menu -->
<li class="link">
<a href="#collapse-TOOLS" data-toggle="collapse" aria-controls="collapse-TOOLS" ID="TOOLS">
Text 5
</a>
<ul class="collapse collapseable collapseable-TOOLS" id="collapse-TOOLS">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-search hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-refresh hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- FILTER Dropdown Menu -->
<li class="link">
<a href="#collapse-FILTER" data-toggle="collapse" aria-controls="collapse-FILTER" id="FILTER">
Text 6
</a>
<ul class="collapse collapseable collapseable-FILTER" id="collapse-FILTER">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-globe hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-shield hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-eye hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-address-book hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-database hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- Einstellungen -->
<li class="link settings-btn">
<a href="#">
<i class="fa fa-fw fa-cog hidden-xs" aria-hidden="true"></i>
Text 7
</a>
</li>
</ul>
</div>
<section class="col-md-10 col-sm-11 display-table-cell valign-top">
<!-- vertikales Menu -->
<aside class="row">
<header id="nav-header" class="clearfix">
<div class="col-md-7">
<nav class="navbar-default pull-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas"
data-target="#side-menu">
<span class="sr-only">Navigation aufklappen und zuklappen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</nav>
</div>
<!-- Menu oben rechts -->
<div class="col-md-5">
<ul class="pull-right">
<li id="welcome" class="hidden-xs">Welcome</li>
<li>
<a href="#" class="logout">
<i class="fa fa-fw fa-sign-out hidden-xs" aria-hidden="true"></i> Logout
</a>
</li>
</ul>
</div>
</header>
</aside>
<!-- Seiteninhalt -->
<div id="content">
<header>
<h2 class="page_title">Title</h2>
</header>
<div class="content-inner">
Content
</div>
</div>
</section>
</main>
I took code for a dashboard we're building here; it's a free bootstrap dashboard template:
http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html
We like it a lot as it's simple and displays the kind of layout we need. Here's what I've done to edit the above so far, to suit our needs:
http://tumolo.co.uk/smartcm/pages/index.html
If you resize your browser, so that you're reducing the width, with the original template, once it gets to (I assume) xs or sm size, the sidebar menu neatly hides and the 3line button in the top right displays. You can tell I'm new to bootstrap!
If you resize my version, once it gets to (I assume) xs or sm size, the sidbar menu displays instead of hides, like it should in original template.
IF it helps, I noticed that as I was editing from template to my version, when I started removing containers from original template, the menu stopped hiding when resizing browser window.
As we want to use this dashboard on mobile phones, it's important for me to understand how to make this menu hidden, as soon as you browse to it, from a mobile device... hope you can help, thanks.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li>
<i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li>
<i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li>
<i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li>
<i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
You are missing <div class="collapse navbar-collapse" ></div>which surrounds the ul class.
Refer to the docs here > Bootstrap Navbar
/*!
* Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
background-color: #fff;
}
}
.navbar-static-top {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<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.html">
<img class="img-responsive" src="img/loginlogo.png">
</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li> <i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li> <i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li> <i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li> <i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li> <i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>