I included this plugin to have my Bootstrap Nav a submenu. My problem is how can I align the submenu to its parent. I need to move it down a little.
I created a CSS like this:
#header-menu-nav .dropdown-menu li ul { margin-top: -27px !important; }
And it's working fine. My problem is in the responsive part. It also affected.
Here's my code in simple HTML:
<ul class="nav navbar-nav" id="header-menu-nav">
<li>
New
<ul class="dropdown-menu">
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</li>
<li>Furniture</li>
<li>Lighting</li>
<li>Kitchen
<ul class="dropdown-menu">
<li>Action
<ul class="dropdown-menu">
<li>Action</li>
<li>Something else here</li>
<li>One more link</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link
<ul class="dropdown-menu">
<li>Another action</li>
<li>A long sub menu
<ul class="dropdown-menu">
<li>Action</li>
<li>Something else here</li>
<li>One more link</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
<li>Another link</li>
<li>One more link</li>
</ul>
</li>
</ul>
</li>
<li>Bath</li>
<li>Interior Goods</li>
<li>Gifts</li>
<li>Outlet</li>
</ul>
Can you help me. Is there a proper way in doing this? Im not really good enough in CSS.
try this.
#header-menu-nav .dropdown-menu li{
position: relative;
}
#header-menu-nav .dropdown-menu li ul{
position: absolute;
top:0;
left: 100%;
}
and remove the margin-top:-27px;
Related
List categories:
<ul class="list">
<li data-value="" class="option selected focus">All Categories</li>
<li data-value="5058" class="option">Cat 1</li>
<li data-value="5064" class="option">Cat 2</li>
<li data-value="5121" class="option">Cat 3</li>
<li data-value="6151" class="option" style="display: list-item;">Cat 4</li>
<li data-value="6379" class="option"></li>
<li data-value="6758" class="option">Cat 6</li></ul>
I removed <li data-value="6379" class="option"></li> List from Wordpress Dashboard and now i get this:
How is displayed
I try to hide that with CSS:
1. ul.list li.option:nth-of-type(5n+0) {display: none !important;}
2. ul.list li.option:nth-child(5) {
display:none;
}
3.ul.list li.option:nth-of-type(1n+4) {display: none;}
How to remove that field from the dropdown?
This works for me, you needed nth-child(6) because its the 6th item!!
ul.list .option:nth-child(6) {
display:none;
}
<ul class="list">
<li data-value="" class="option selected focus">All Categories</li>
<li data-value="5058" class="option">Cat 1</li>
<li data-value="5064" class="option">Cat 2</li>
<li data-value="5121" class="option">Cat 3</li>
<li data-value="6151" class="option" style="display: list-item;">Cat 4</li>
<li data-value="6379" class="option"></li>
<li data-value="6758" class="option">Cat 6</li></ul>
</ul>
I have a bootstrap navbar which utilizes drop down links. Currently it looks as follows:
The green part is the actual navbar and the grey part is the dropdown you get when you click any of the links.
I would like to space out the links in my nav bar so that they are evenly spaced with some padding on the left and right, kind of like this:
Right now here is how my code is structured:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.navbar {
background-color: #007953;
font-family: Arial;
text-transform: uppercase;
}
.nav.navbar-nav li a {
color: white;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #007953;
color: white;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
color: white;
background-color: #007953;
}
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
display: table-cell;
}
.dropdown-menu {
min-width: 200px;
background-color: #49565A;
}
.dropdown-menu.columns-2 {
min-width: 400px;
background-color: #49565A;
}
/* background-color here controls background of sub menu*/
.dropdown-menu.columns-3 {
min-width: 600px;
background-color: #49565A;
font-family: Arial;
text-transform: capitalize;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
text-align: left;
}
/* color tag here controls color of sub menu item's text*/
.multi-column-dropdown {
list-style: none;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: yellow;
}
.caret {
color: #9CCB3B;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Three Column <b class="caret" ></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
Three Column <b class="caret" ></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
Three Column <b class="caret" ></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
How can I achieve this without breaking any of the drop down functionality which I have implemented?
I've added some modifications for you code. Hope this will work for you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.navbar {
background-color: #007953;
font-family: Arial;
text-transform: uppercase;
}
.dropdown{
margin-right:140px;
margin-left:22px;
}
.nav.navbar-nav li a {
color: white;
}
..nav .navbar-nav{
width:900px !important;
}
.nav .navbar-nav .dropdown{
margin-right:200px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #007953;
color: white;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
color: white;
background-color: #007953;
}
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
display: table-cell;
}
.dropdown-menu {
min-width: 200px;
background-color: #49565A;
}
.dropdown-menu.columns-2 {
min-width: 400px;
background-color: #49565A;
}
/* background-color here controls background of sub menu*/
.dropdown-menu.columns-3 {
min-width: 600px;
background-color: #49565A;
font-family: Arial;
text-transform: capitalize;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
text-align: left;
}
/* color tag here controls color of sub menu item's text*/
.multi-column-dropdown {
list-style: none;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: yellow;
}
.caret {
color: #9CCB3B;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Three Column <b class="caret" ></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-2">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
Three Column <b class="caret" ></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
Three Column <b class="caret" ></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li class="divider"></li>
<li>Another action</li>
<li class="divider"></li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to achieve scrollable dropdown menu with sub-menus. I used the css from this post to have sub-menus in bootstrap 3. The problem is that the sub-menu is hidden within the container or is visible with a horizontal scrollbar within the container.
Here is what I have http://www.bootply.com/1OsPZq7WJC
For reference, HTML:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Scrollable Menu <span class="caret"></span></button>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Action</li>
<li class="dropdown-submenu">Submenu
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
<li>Action 4</li>
<li>Action 5</li>
<li>Action 7</li>
</ul>
</li>
<li>Action</li>
<li>Another action</li>
<li class="dropdown-submenu">Submenu
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
<li>Action 4</li>
<li>Action 5</li>
<li>Action 7</li>
</ul>
</li>
</ul>
</div>
And CSS:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: visible;
overflow-y: scroll;
}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
You can't force the page to adopt the height of the drop down menu unless you define a specific height. Here is the css you need to add for a full page height.
body{
height:100vw;
}
Fiddle.
I have a navigation bar with drop down menus created with UL elements. Currently, the drop down table shifts when the web page is zoomed in or out. How do I style the CSS so that the drop down menus will stay aligned?
<ul id="links">
<li>First link</li>
<li>Second link
<ul id="dropdown1">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
<li>Third link</li>
<li>Fourth link
<ul id="dropdown2">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
</ul>
jsFiddle here.
I want to make a top navbar with a second level, but not as a dropdown menu. It should apear as a second row under the first one. Example (* means the is the active one):
nav1 | nav2* | nav3
nav2a | nav2b
Should look like this:
<div class="navbar" id="topnavi">
<div class="navbar-inner">
<ul class="nav">
<li>
nav1
<ul class="secondlevel">
<li>nav1a</li>
<li>nav1b</li>
<li>nav1c</li>
</ul>
</li>
<li>
nav2
<ul class="secondlevel">
<li>nav2a</li>
<li>nav2b</li>
</ul>
</li>
<li>
nav3
</li>
</ul>
</div>
</div>
Any ideas?
I used the dropdown class and over-wrote some of the styles so that the nested dropdown items appear as a secondary nav below the primary items. This is the general direction from what I understand- hope it helps!
HTML:
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
.nav > li {
display: inline-block;
}
.dropdown-menu{
display: inline;
position: relative;
}
.dropdown-menu > li{
display:inline-block;
}