I have the following situation:
jQuery(document).ready(function($) {
"use strict";
function active_menu(e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
if (!$this.is(':animated')) { // to prevent double click issue
$this.toggleClass('active');
}
}
$(document).on('click', '.menu-item-has-children', active_menu);
});
nav {
position: relative;
display: inline-block;
top: auto;
overflow: visible;
background-color: transparent;
}
nav > ul {
list-style: none;
margin: 14px 0 0 0;
float: right;
position: relative;
}
nav > ul > li {
float: left;
min-width: 0;
position: relative;
}
nav > ul > li.menu-item-has-children:before {
content: "";
border-bottom: 2px solid #000;
border-right: 2px solid #000;
width: 7px;
height: 7px;
position: absolute;
right: -4px;
bottom: 7px;
background-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
nav > ul > li a {
color: #1c1c1c;
font-weight: 400;
font-size: 13px;
text-transform: uppercase;
text-align: center;
display: inline-block;
padding-bottom: 4px;
margin: 0;
padding: 0 20px;
}
nav > ul > li span {
display: inline-block;
}
nav > ul ul {
display: none;
list-style: none;
position: absolute;
background: #fff;
border: 1px solid #e1e1e1;
margin: 0;
min-width: 200px;
margin-top: 33px;
z-index: 2001;
}
nav > ul > li > ul:before {
content: "";
display: block;
position: absolute;
width: 200px;
min-width: 200px;
height: 36px;
top: -36px;
left: 0;
z-index: 2004;
}
nav > ul li.active > ul {
display: block;
z-index: 2003;
}
nav > ul ul li {
position: relative;
}
nav > ul ul li a {
width: 100%;
text-align: left;
padding: 6px 13px 7px 13px;
}
nav > ul ul ul {
position: absolute;
left: 100%;
top: 0;
margin-left: 10px;
margin-top: 0;
z-index: 2002;
border: 1px solid #e1e1e1;
}
nav > ul ul ul:before {
position: absolute;
content: "";
top: 0;
left: -11px;
width: 11px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<ul id="main_menu">
<li id="nav-menu-item-1636" class="main-menu-item menu-first menu-item-type-custom menu-item-object-custom">
<a href="http://wpthemetestdata.wordpress.com/" class="menu-link main-menu-link">
<span>Home</span>
</a>
</li>
<li id="nav-menu-item-1637" class="main-menu-item">
<a href="#/?page_id=703" class="menu-link main-menu-link">
<span>Blog</span>
</a>
</li>
<li id="nav-menu-item-1638" class="main-menu-item">
<a href="#/?page_id=701" class="menu-link main-menu-link">
<span>Front Page</span>
</a>
</li>
<li id="nav-menu-item-1639" class="main-menu-item menu-item-has-children has_children">
<a href="#/?page_id=2" class="menu-link main-menu-link">
<span>About The Tests</span>
</a>
<ul class="navi first menu-depth-1">
<li id="nav-menu-item-1697">
<a href="#/?page_id=1133" class="menu-link sub-menu-link">
<span>Page Image Alignment</span>
</a>
</li>
<li id="nav-menu-item-1698">
<a href="#/?page_id=1134" class="menu-link sub-menu-link">
<span>Page Markup And Formatting</span>
</a>
</li>
<li id="nav-menu-item-1640">
<a href="#/?page_id=501" class="menu-link sub-menu-link">
<span>Clearing Floats</span>
</a>
</li>
<li id="nav-menu-item-1641">
<a href="#/?page_id=155" class="menu-link sub-menu-link">
<span>Page with comments</span>
</a>
</li>
<li id="nav-menu-item-1642">
<a href="#/?page_id=156" class="menu-link sub-menu-link">
<span>Page with comments disabled</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1643" class="main-menu-item menu-item-has-children has_children">
<a href="#/?page_id=174" class="menu-link main-menu-link">
<span>Level 1</span>
</a>
<ul class="navi first menu-depth-1">
<li id="nav-menu-item-1644" class=" menu-item-has-children has_children">
<a href="#/?page_id=173" class="menu-link sub-menu-link">
<span>Level 2</span>
</a>
<ul class="navi navi menu-depth-2">
<li id="nav-menu-item-1645" class=" navi ">
<a href="#/?page_id=172" class="menu-link sub-menu-link">
<span>Level 3</span>
</a>
</li>
<li id="nav-menu-item-1699" class=" navi ">
<a href="#/?page_id=746" class="menu-link sub-menu-link">
<span>Level 3a</span>
</a>
</li>
<li id="nav-menu-item-1700" class=" navi ">
<a href="#/?page_id=748" class="menu-link sub-menu-link">
<span>Level 3b</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1701">
<a href="#/?page_id=742" class="menu-link sub-menu-link">
<span>Level 2a</span>
</a>
</li>
<li id="nav-menu-item-1702">
<a href="#/?page_id=744" class="menu-link sub-menu-link">
<span>Level 2b</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1646" class="main-menu-item">
<a href="#/?page_id=146" class="menu-link main-menu-link">
<span>Lorem Ipsum</span>
</a>
</li>
<li id="nav-menu-item-1703" class="main-menu-item">
<a href="#/?page_id=733" class="menu-link main-menu-link">
<span>Page A</span>
</a>
</li>
<li id="nav-menu-item-1704" class="main-menu-item">
<a href="#/?page_id=735" class="menu-link main-menu-link">
<span>Page B</span>
</a>
</li>
</ul>
</nav>
The functionality is sort of ok - I click on the menu that has children, toggle the class active and the unsorted children list shows. But the problem is that when I click on the anchor in the child, the list closes and the links don't do anything because of e.preventDefault();.
Can this be sorted out? I tried unbinding the click, but that didn't work.
just use javascript to emulate anchor click with window.location.href = $(this).attr("href")
Related
I'm using some font awesome icons in an element inside a href. The color of these has to be set in javascript, based on some conditions. Which works fine, BUT on :hover only the href text changes color, even though the color is set to !important in CSS.
If I remove the inline color set in JS for the icons it works fine with :hover.
Shouldn't !important override the inline style set in js?
My element where iconcolor is the issue:
<a class="dropdown-toggle" data-toggle="dropdown" href="#grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>Grad </a>
Removing the elem.iconcolor and not setting any color in JS works, but then again I won't be able to add color on conditions.
And my CSS:
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-submenu:focus > a, .dropdown-submenu:hover > a {
/*color: inherit;*/
text-decoration: none;
background-color: rgba(0,122,255,255); /*Color on nav items on hover */
background-image: none;
color: white !important;
}
I'm using bootstrap 2.3.2 on top of this.
Full html structure:
/*
#embeda013f208-3363-a68f-3b07-1a1824410343_0 ul.nav li.dropdown > ul.dropdown-menu
set to display:block when editing in browser, to see changes instantly.
*/
#navigationDiv {
/*margin-top: 46px;*/
position: -webkit-sticky; /* Safari */
position: sticky;
top: 46px;
font-family: inherit;
font-weight: 300;
}
.navbar-inner {
box-shadow: none;
border-radius: 0px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown > ul.dropdown-menu {
display: none;
}
navbar sticky-top navbar-light bg-light {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 46px;
}
/*#novobarcontainer{
position:absolute;
top:0px;
left:0px;
}*/
.navbar {
margin-bottom: 20px;
overflow: visible;
position: fixed;
top: 46px;
left: 0px;
width: 100%;
z-index: 1;
}
.dropdown-menu > li > a {
border-bottom: none;
padding: 7px 20px;
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
padding: 0px 0px 0px 0px;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-submenu:focus > a, .dropdown-submenu:hover > a {
color: inherit;
text-decoration: none;
background-color: rgba(0,122,255,255); /*Color on nav items on hover */
background-image: none;
color: white;
}
.dropdown-submenu > .dropdown-menu {
border-radius: 0;
margin-top: 0px;
margin-left: 1px;
}
/*This is the color on the small arrow on the submenu*/
.dropdown-submenu > a:after {
border-left-color: black;
}
.dropdown-submenu > a:after:hover {
border-left-color: white;
}
/* change color on hover root element*/
.navbar .nav > li > a {
color: black;
text-shadow: none;
}
.navbar .nav > li > a:hover {
color: white;
background-color: rgba(0,122,255,255);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/regular.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>
<div id="navigationDiv" class="navbar-inner"><ul class="nav navbar-nav" id="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#undergrad.com"><i style="height:20px; width:20px; color:red;" class="fas fa-ban" id="jsonicon"></i>UnderGrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#art.undergrad.com"><i style="height:20px; width:20px; color:blue;" class="fas fa-ban" id="jsonicon"></i>art.undergrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#classic.art.undergrad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>classic.art.undergrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#hey"><i style="height:20px; width:20px; color:#3CB371;" class="fas fa-ban" id="jsonicon"></i>hey </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:red;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:black;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>Grad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:#3CB371;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:blue;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:black;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
</li>
</ul>
</li>
</ul>
</li>
</ul></div>
:hover will always overwrite element styling. Setting a:hover { color: inherit; }; in css to overwrite font-awesomes css should do the trick.
The problem
Hello!
I have a problem with my hoverable dropdown menu. It always stays under the first navigation item even though it's not triggered, but it should be under the triggered navigation item (the navigation item on which the mouse pointer is located). How can i how can I fix that?
Thanks in advance!
#nav-list {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-item {
display: inline;
padding: 0;
}
.nav-item-text {
padding: 16px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: context-menu;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link {
padding: 20px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link:hover {
opacity: 100%;
cursor: pointer;
transition: .2s ease all;
color: var(--primary);
}
.nav-dropdown {
display: none;
opacity: 0;
position: absolute;
z-index: 99;
margin: 3px 0 0 0;
padding: 15px;
height: auto;
min-width: 280px;
background: var(--background);
border-radius: 4px;
border: 2px solid var(--elevation-16dp);
}
.nav-item:hover .nav-dropdown {
display: block;
transition: .2s ease all;
opacity: 100%;
}
<ul id="nav-list">
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title A 1</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title B 2</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
</ul>
You have to add this css to your code:
<style>
#nav-list > li {
position:relative;
}
#nav-list .nav-dropdown {
left: 0;
}
</style>
I use bootstrap 3 and i have menu. But I have problem with dropdown menu.
I can't use dropdown menu because it disappears so fast. Also it shows on hover very fast without animations
my html
<ul class="nav navbar-nav">
<li class="menu-item dropdown"><a title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
</ul>
</li>
</ul>
css:
.nav>li {
float: left;
}
.nav>li>a {
position: relative;
font-size: 17px;
}
.nav li a {
display: block;
}
.nav li.dropdown ul {
margin-top: 20px;
position: absolute;
top: 100%;
display: none;
z-index: 2000;
padding: 5px 0;
border-left: none;
border-right: none;
border-bottom: none;
}
how to solve this problem?
Add class="dropdown-toggle" data-toggle="dropdown" to your Sample Page <a>
.nav>li {
float: left;
}
.nav>li>a {
position: relative;
font-size: 17px;
}
.nav li a {
display: block;
}
.nav li.dropdown ul {
margin-top: 20px;
position: absolute;
top: 100%;
//display: none;
z-index: 2000;
padding: 5px 0;
border-left: none;
border-right: none;
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
<li class="menu-item dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
</ul>
</li>
</ul>
I tried to add an input box to the most right side of the bar on the same line as those menu bars, but everytime its positioned bad or its not even there. Can you help me with this? It needs to be in the menu bar because of my JS hide-on-scroll function. I'm trying to use JQuery-ui's
DatePicker ("$(function() {
$("#datepicker").datepicker();
});")
HTML:
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<p>Date: <input type="text" id="datepicker"></p></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tretie {
right: 0;
}
check this fiddle. what i did was, made your nav display as block. and centered it with margin:auto. then added the text bar next to it. made it float and with margin-top i moved it up so it's in right place.
<body>
<!--MENU BAR!-->
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
<input type="text" class="tib" />
</nav>
body,nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/* menu*/
nav {
display: inline-block;
position: fixed;
width: 100%;
/* text-align: center; */
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav ul > li > a{
text-align:center;
}
ul.nav{
margin:auto;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
/* display: inline-block; */
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tib{
float:right;
margin-top:-28px;
}
I am trying to change menu drop down for small devices for "onclick" and "drop down" for item1 and item2, problem is drop down menu subs is outside of root nav for mobile?
How change drop down menu subs in inside root nav and on click for mobile?
Source from http://jsfiddle.net/apougher/ydcMQ/
My edit::
HTML:
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="logo.jpg" alt="Dispute Bills"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>home</li>
<li class="dropdown menu-large ">
item 1<b class="caret "></b>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Glyphicons</li>
<li>Available glyphs</li>
<li class="disabled ">How to use</li>
<li>Examples</li>
<li class="divider "></li>
<li class="dropdown-header ">Dropdowns</li>
<li>Example</li>
<li>Aligninment options</li>
<li>Headers</li>
<li>Disabled menu items</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Button groups</li>
<li>Basic example</li>
<li>Button toolbar</li>
<li>Sizing</li>
<li>Nesting</li>
<li>Vertical variation</li>
<li class="divider "></li>
<li class="dropdown-header ">Button dropdowns</li>
<li>Single button dropdowns</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Input groups</li>
<li>Basic example</li>
<li>Sizing</li>
<li>Checkboxes and radio addons</li>
<li class="divider "></li>
<li class="dropdown-header ">Navs</li>
<li>Tabs</li>
<li>Pills</li>
<li>Justified</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Navbar</li>
<li>Default navbar</li>
<li>Buttons</li>
<li>Text</li>
<li>Non-nav links</li>
<li>Component alignment</li>
<li>Fixed to top</li>
<li>Fixed to bottom</li>
<li>Static top</li>
<li>Inverted navbar</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown menu-large ">
item 2 <b class="caret "></b>
<ul class="dropdown-menu megamenu row ">
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Glyphicons</li>
<li>Available glyphs</li>
<li class="disabled ">How to use</li>
<li>Examples</li>
<li class="divider "></li>
<li class="dropdown-header ">Dropdowns</li>
<li>Example</li>
<li>Aligninment options</li>
<li>Headers</li>
<li>Disabled menu items</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Button groups</li>
<li>Basic example</li>
<li>Button toolbar</li>
<li>Sizing</li>
<li>Nesting</li>
<li>Vertical variation</li>
<li class="divider "></li>
<li class="dropdown-header ">Button dropdowns</li>
<li>Single button dropdowns</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Input groups</li>
<li>Basic example</li>
<li>Sizing</li>
<li>Checkboxes and radio addons</li>
<li class="divider "></li>
<li class="dropdown-header ">Navs</li>
<li>Tabs</li>
<li>Pills</li>
<li>Justified</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Navbar</li>
<li>Default navbar</li>
<li>Buttons</li>
<li>Text</li>
<li>Non-nav links</li>
<li>Component alignment</li>
<li>Fixed to top</li>
<li>Fixed to bottom</li>
<li>Static top</li>
<li>Inverted navbar</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js "></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js "></script>
<script>
// Dropdown Menu Fade
jQuery(document).ready(function(){
$(".dropdown ").hover(
function() { $('.dropdown-menu', this).stop().fadeIn("fast ");
},
function() { $('.dropdown-menu', this).stop().fadeOut("fast ");
});
});
</script>
</body>
CSS:
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding-top: 6px;
padding-right: 6px;
padding-left: 6px;
padding-bottom: 6px;
width: auto;
}
/* This should be around line 4713 in your bootstrap.css */
.navbar-collapse.collapse {
text-align: center;
}
.navbar-nav {
display: inline-block;
float: none;
margin: 0;
max-width: 1200px;
}
.navbar-default {
color: #0A0A0A;
background-color: #FFFCFC;
border-color: rgba(208, 174, 174, 1.00);
}
.navbar-default .navbar-nav > li > a {
color: #030303;
padding-left: 30px;
padding-right: 30px;
}
.navbar-default .navbar-nav > li > a:hover {
color: #7C7373;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #666666;
border-bottom-color: #111222;
}
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
float: none;
}
.megamenu> li > ul {
padding: 0;
}
.megamenu> li > ul > li {
list-style: none;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
font-size: 80%;
text-align: left;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #AB2F2F;
background-color: #EFE7E7;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #9A5455;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.dropdown-header {
color: #1D5586;
font-size: 0.9em;
}
#media (max-width: 768px) {
.navbar-default .navbar-nav > li > a {
color: #030303;
padding-right: 1px;
padding-left: 1px;
}
.navbar-collapse.collapse {
text-align: left;
/* Set this */
}
.megamenu {
margin-left: 0;
margin-right: 0;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
color: #fff;
}
}
my code on: FIDDLE
You need to change some css
.navbar-default .navbar-nav > .open > a{
background : transparent !important;
}
.navbar-nav .open .dropdown-menu{
background : white;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color : #999999 !important;
}
Here is the updated jsFiddle