I have been trying to over write the built in Bootstarp style on navbar dropdowns to no avail. I have some javascript trying to force it but I cant seem to get this to work. The native bootstrap javascript overwrites mine and it snaps back to being 228px height. Here is my code:
// CLOSE NAV BARS NO OVERLAPPING
$('.navbar button').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in')){
$('.navbar .in').removeClass('in').height(0);
}
});
//DROPDOWN MODE SELECTOR LOGIN
// Force 100% height mobile navigation
$('#navbar-collapse-1, #navbar-collapse-2').css('height', $(window).height());
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.modeSelector').find('.dropdown-toggle').html(selText+' <span class="modeSelect menu_toggleable glyphicon glyphicon-menu-down pull-right"></span>');
});
$('#myMode-glyphicon-mobile, #myMode-glyphicon').on('show.bs.dropdown', function () {
$(".modeSelect").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});
$('#myMode-glyphicon-mobile, #myMode-glyphicon').on('hidden.bs.dropdown', function () {
$(".modeSelect").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});
// FLIP ALL THE GLYPHICONS NAVBAR
$('#navbar-collapse-1').on('shown.bs.collapse', function () {
$(".myMenu-glyphicon").removeClass("glyphicon-menu-down");
$(".myMenu-glyphicon").addClass("glyphicon-menu-up");
$(this).addClass("dropdown-open").removeClass("dropdown-closed");
if( $('#navbar-collapse-2').hasClass('dropdown-open') ){
$(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
$(".myLogin-glyphicon").addClass("glyphicon-menu-down");
$("#navbar-collapse-2").removeClass("dropdown-open");
$("#navbar-collapse-2").addClass("dropdown-closed");
}
});
$('#navbar-collapse-1').on('hidden.bs.collapse', function () {
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
$(this).removeClass("dropdown-open").addClass("dropdown-closed");
});
$('#navbar-collapse-2').on('shown.bs.collapse', function () {
$(".myLogin-glyphicon").removeClass("glyphicon-menu-down");
$(".myLogin-glyphicon").addClass("glyphicon-menu-up");
$(this).addClass("dropdown-open").removeClass("dropdown-closed");
if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
$("#navbar-collapse-1").removeClass("dropdown-open");
$("#navbar-collapse-1").addClass("dropdown-closed");
}
});
$('#navbar-collapse-2').on('hidden.bs.collapse', function () {
$(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
$(".myLogin-glyphicon").addClass("glyphicon-menu-down");
$(this).removeClass("dropdown-open").addClass("dropdown-closed");
if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
}
});
HTML
<div class="header">
<!-- BEGIN SEARCH AND LOGIN -->
<div class="container">
<div class="col-sm-4 logo hidden-xs"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></div>
<div class="col-sm-4 login-wrapper hidden-xs">
<ul class="list-inline header-list">
<li>Login to Navisphere</li>
<li id="myMode-glyphicon" class="pull-right list-unstyled dropdown modeSelector">
Shippers <span class="modeSelect glyphicon glyphicon-menu-down"></span>
<ul class="modes list-unstyled dropdown-menu" role="menu">
<li>Navisphere</li>
<li>CHRWTrucks</li>
<li>CHREUTransport</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
<form class="login-form" role="login">
<div class="form-group">
<input type="text" class="user-input form-control" placeholder="Username">
<input type="text" class="pass-input form-control" placeholder="Password">
<button type="submit" title="Login" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></button>
</div>
</form>
</div>
<div class="col-sm-4 search-wrapper hidden-xs">
<form class="search-form" role="search">
<div class="form-group">
<input type="text" class="search-input form-control" placeholder="Search">
<button type="submit" title="Search TMC" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
</div>
</div>
<div class="row mobileNav">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand hidden-md hidden-xl hidden-sm hidden-lg" href="#"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="autocollapse" data-target="#navbar-collapse-1">
<span class="menu-toggle-text">MENU <i class="myMenu-glyphicon glyphicon glyphicon-menu-down"></i></span>
</button>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="menu-toggle-text">LOGIN <i class="myLogin-glyphicon glyphicon glyphicon-menu-down"></i></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<form class="search-form mobileSearch-form hidden-sm hidden-md hidden-xl hidden-lg" role="search">
<div class="form-group">
<input type="text" class="search-input form-control" placeholder="Search">
<button type="submit" title="Search TMC" class="btn btn-default mobileSearch-btn"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
<li class="active dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">SERVICES <span class="sr-only">(current)</span></a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>TMS Technology</li>
<li>Process Management</li>
<li>Consulting</li>
<li>Small Business Technology</li>
<li>Global Control Tower</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">RESULTS</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Manufacturing</li>
<li>Automotive</li>
<li>Food</li>
<li>Produce</li>
<li>Retail</li>
<li>Paper/Packaging</li>
<li>Beverage</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">RESOURCES</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Videos</li>
<li>White Papers</li>
<li>Case Studies</li>
<li>Blog</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">ABOUT</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Our Story</li>
<li>Values</li>
<li>Leadership</li>
<li>Careers</li>
<li>News</li>
<li>Charitble Giving</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">CONTACT</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Locations</li>
<li>Connect with an Expert</li>
<li>Email News</li>
<li>Update Preferences</li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-2">
<ul class="nav navbar-nav hidden-md hidden-xl hidden-sm hidden-lg mobileLogin">
<li>
<ul class="header-list list-unstyled">
<li class="list-unstyled mobile">Login to Navisphere</li>
<li id="myMode-glyphicon-mobile" class="list-unstyled dropdown modeSelector">
Shippers <span class="modeSelect glyphicon glyphicon-menu-down pull-right"></span>
<ul class="mobileList list-unstyled dropdown-menu mobile" role="menu">
<li>Navisphere</li>
<li>CHRWTrucks</li>
<li>CHREUTransport</li>
</ul>
</li>
</ul>
</li>
<div class="clearfix"></div>
<form class="login-form" role="login">
<div class="form-group">
<input type="text" class="user-input form-control longin-control" placeholder="Username">
<input type="text" class="pass-input form-control login-control" placeholder="Password">
<button type="submit" title="Login" class="btn btn-default mobileSearch-btn pull-right"><i class="glyphicon glyphicon-arrow-right"></i></button>
</div>
</form>
</ul>
</div>
</div><!-- /.container -->
</nav>
</div>
</div>
<!-- END HEADER -->
CSS
CSS
/************* BASIC STYLES **************/
a {
color:#tmcLightblue;
text-decoration:none;
}
a:hover {
text-decoration:none;
}
p {
margin: 10px 0;
}
body{
font-family:"Lato";
overflow-x:hidden;
}
html,body {
height: 100%;
min-height: 100%;
}
/********* NAV STYLES *********/
.dividerNav{
height:4px;
background-color:#fff;
}
.navbar.navbar-default > .container{
border-bottom:1px solid #tmcDarkblue
}
.menu-toggle-text{
color:#4fb4e1;
}
.navbar-toggle{
border:none;
padding:9px 1px;
}
.navbar-toggle:hover .navbar-toggle:focus{
background-color:none;
}
.hover-dropdown{
background-color:transparent;
}
.hover-dropdown ul{
border: medium none;
border-radius:0px;
background-color: rgba(0,58,99,0.80);
padding: 25px 0;
}
.navbar .hover-dropdown li a{
color:#fff;
margin: 0 18px;
}
.header-list{
margin-bottom:4px;
margin-top:15px;
}
.navbar-brand{
text-indent:-999px;
max-width:234px;
width:100%;
height:auto;
}
.nav > li {
display: block;
position: static;
margin: 0 25px 0 0;
}
.subscribe-input, .form-control:focus{
box-shadow:none;
border-color:#tmcDarkblue;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar {
text-align: center;
margin-bottom:8px;
border-bottom:none;
border-top:0px;
border-radius:0px;
border-left:0px;
border-right:0px;
border-top:0px;
}
.mobileNav{
margin-left: 0px;
margin-right: 0px;
display:block;
height:100%;
}
.modeSelector{
right:57px;
}
.dropdown a{
text-decoration:none;
}
.navbar .hover-dropdown li a:hover {
text-decoration:none;
color:#tmcLightblue;
}
.dropdown-menu{
width:100%;
text-align:center;
box-shadow:none;
border:none;
border-radius:0;
}
.mainDropdown{
margin-top:-1px !important;
}
.modes{
border:1px solid #tmcDarkblue;
border-radius:0px;
text-align:left;
}
.modes li a{
color:#tmcDarkblue;
}
.modes li a:hover{
color:#tmcLightblue;
}
.user-input, .pass-input{
width:41.5%;
float:left;
}
.search-input{
width:82%;
}
.subscribe-input, .form-control{
border-radius:0px;
border-color:#tmcDarkblue;
color:#tmcDarkgrey;
float:left;
margin-right:4px;
}
.glyphicon-arrow-right{
color:#c05d1a;
}
.glyphicon-search{
color:#c05d1a;
}
.logo, .search-wrapper {
padding-top:39px
}
#navbar-collapse-2, #navbar-collapse-1{
position: static;
width: 100%;
z-index: 2147483647;
}
.nav > li.dropdown{
/*border-bottom:2px solid #fff;*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
color:#tmcLightblue;
background-color:none;
background:none;
border-bottom:2px solid #tmcDarkblue;
font-weight:bold;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color:#tmcLightblue;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent !important;
color: #tmcLightblue;
}
.navbar-nav > li > a{
border-bottom:2px solid #fff;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
background-color: #fff;
border-color: #tmcOrange;
color: #fff;
}
.glyphicon .glyphicon-search:hover {
color: #fff;
}
/********* HEADLINES *********/
.headlineBorder{
display:inline;
text-transform:uppercase;
font-size:20px;
/*border-bottom:3px solid #tmcGreen;*/
}
.headlineBorderblue{
display:inline;
text-transform:uppercase;
/*border-bottom:3px solid #tmcDarkblue;*/
}
.headlineBorderwhite{
display:inline;
text-transform:uppercase;
/*border-bottom:3px solid #fff;*/
color:#fff;
}
.headlineBorderwhite_small {
font-size: 22px;
margin: 0 0 5px;
}
.headlineList{
margin-bottom:15px;
}
.btn-blue{
border-color:#tmcLightblue;
}
.btn-blue:hover, .btn-blue:active, .btn-blue:focus{
background-color:#tmcDarkblue;
border-color:#fff;
}
.glyphicon-menu-right:hover{
color:#fff !important;
}
.headlineGlyph:hover{
color:#tmcLightblue !important;
}
.btn-mobile-right {
border:none;
}
.btn-mobile-right:hover, .btn-mobile-right:focus, .btn-mobile-right.focus, .btn-mobile-right:active, .btn-mobile-right.active, .open > .dropdown-toggle.btn-default {
background-color: transparent;
}
.glyphicon-menu-right, .glyphicon-menu-left{
/*color:#tmcLightblue;*/
}
.glyphicon-menu-right:hover, .glyphicon-menu-left:hover{
color:#fff;
}
.fourXfour{
margin-bottom: 50px;
}
/********** SIDEBAR STYLES ***********/
.sidebarImg{
margin:15px;
}
.sidebarImg > a {
display: block;
}
.caption{
margin-top:30px;
padding-left:15px;
padding-right:15px;
}
.caption > h4{
font-weight:bold;
line-height:12px;
}
/*********** CONTACT PAGE STYLES ***********/
.pageIntroheadline > ul.contactList li a{
color:#fff;
}
.fourXfour > ul.contactList li a{
color:#tmcLightblue;
}
.contactList{
margin-top:15px;
}
#myMap{
background:url('../images/worldMap.jpg');
background-repeat: no-repeat;
background-size:contain;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
.mapDescriptionwrapper{
display:block;
margin:-5px 0 0;
z-index:1;
}
.mapTitle{
background:#tmcLightblue;
padding:5px 8px;
border:1px solid #fff;
display:inline-block;
width:auto;
text-align:center;
color:#fff;
z-index:10;
}
.mapTitle:hover{
display:block;
background:orange;
display:inline-block;
}
.mapDescription{
display:none;
}
#description-box{
background-color: #tmcLightblue;
border: 1px solid white;
}
/********* INSIDE PAGE HERO IMAGE ************/
.insidePagehero {
display: block;
height: auto;
max-width: 960px;
min-height: 232px;
min-width: 392px;
width: 100%;
}
.halfHero{
padding:0;
}
.insideHerocolorPicker-orange{
background:#tmcOrange;
}
.insideHerocolorPicker-darkBlue{
background:#tmcDarkblue;
}
.insideHerocolorPicker-lightBlue{
background:#tmcLightblue;
}
.insideHerocolorPicker-green{
background:#tmcGreen;
}
.pageIntroheadline{
display: block;
color:#fff;
margin-top:5%;
margin-bottom:0;
}
.pageHero {
padding:0 15px 0 0;
}
/********* HOMEPAGE MARKETING AREA *********/
.marketing-wrapper{
margin-top:50px;
margin-bottom:50px;
}
.mareting-section{
padding:0;
}
/************************* FLIPPING STYLES *******************/
.marketing-wrapper h2{
margin-bottom:20px;
}
.flipperWrap{
padding:0;
}
.card {
width:100%;
max-width: 750.666px;
height: 348px;
margin: 0px;
display: inline-block;
clear:both;
}
.flip {
width:100%;
max-width: 750.666px;
height: 396px;
margin: 0px;
display: inline-block;
clear:both;
margin-bottom:30px;
}
.front, .back {
padding: 0px;
}
.front {
background-color: transparent;
}
.back {
background-color: transparent;
}
.arrowFront{
height:230px !important;
}
.arrowBack{
height:230px !important;
background:#c05d1a url(../images/triangle.jpg) no-repeat bottom right;
}
.blogInside, .tmsInside, .globalInside{
height: 50%;
margin: 2.5% auto;
width: 78%;
}
.flipBack{
color:#fff;
padding: 0px;
}
.flipOrange{
background-color:#tmcOrange;
}
.flipDarkblue{
background-color:#tmcDarkblue;
}
.flipLightblue{
background-color:#tmcLightblue;
}
.flipGreen{
background-color:#tmcGreen;
}
.flipDarkgrey{
background-color:#tmcDarkgrey;
}
.flipLightgrey{
background-color:#tmcLightgrey;
}
.blogIcon{
background:url("../images/blogIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.tmsIcon{
background:url('../images/tmsIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.globalIcon{
background:url('../images/globalIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 38px;
float:left;
margin:0 22px 0 0;
}
/**************** LEADERSHIP SLIDER STYLES *****************/
.leadershipSlider{
margin-top:30px;
margin-bottom:30px;
}
.leadershipCol {
float: left;
margin-right:15px;
}
.leadershipName, .slider{
color:#fff;
height:auto;
width:82%;
max-width:138px;
background-color:#tmcOrange;
padding:10px;
margin:-85px 0 0 38%;
border:1px solid #fff;
display:block;
float:left;
}
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
color:#fff;
margin:-8px 0;
}
.leadershipImg{
display:block;
float:left
}
/**************** Client Results Page *******************/
.introText{
padding:0;
}
.clientResultsGrid{
margin-top:30px;
margin-bottom:30px;
}
.panel-default{
padding:0;
border:none;
}
.panel-default > .panel-heading{
border:none;
color:#tmcDarkblue;
background:#fff;
}
.panel{
box-shadow:none;
}
.panel-body{
background:#tmcLightgrey;
padding: 15px 0;
}
.panelResults{
margin-bottom:15px;
}
.panel-heading{
padding: 0;
background:#tmcLightblue;
border-radius:0px;
margin-bottom:5px;
}
.panel-title{
color:#fff;
padding: 15px 0;
font-weight: bold;
text-transform: uppercase;
}
.accordionResults{
padding: 0;
}
.accordionIcon{
color: #fff;
display: inline-block;
font-size: 33px;
min-width: 50px;
padding: 7.5px 0;
text-align: center;
}
.resultsIcon{
padding: 0 0.5%;
width:auto;
border-right:2px solid #fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.resultsTitle{}
.glyphBox{
background: none repeat scroll 0 0 #c0c920;
display: inline-block;
height: auto;
margin: 15px 0 25px;
min-height: 32px;
min-width: 42px;
padding: 4px;
text-align: center;
}
a.glyphBox:hover, a.glyphBox:focus{
color:#tmcGreen;
text-decoration:none;
outline:nonne;
outline-offset:0px;
}
.glyphBox .indicator{
color:#fff;
vertical-align:middle;
}
.preResultsaccordion {
padding:0;
}
.preResultsaccordion > .inside{
padding:0;
margin:15px 0;
}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour{
padding:0;
}
#media (max-width:#screen-lg) {
}
#media (max-width:#screen-md) {
.navbar-nav > li > a {
border-bottom: 0px solid #fff;
}
.modeSelector{
right:0px;
}
.search-input{
width:78%;
}
.user-input, .pass-input{
width:37%;
}
}
#media (max-width:#screen-sm) {
/*FEEDSLIDER*/
.headlineWrapper, .headlineWrapper-green, .headlineWrapper-white{
width:80%;
}
.mobile{
color:#fff;
}
.headlineHero{
font-size:medium;
}
.secondaryNavigation-wrapper{
background:#tmcDarkblue;
padding: 15px 0 0;
}
.secondaryNavigation-mobile{
color:#fff;
list-style:none;
padding-bottom: 0px;
padding-left:0;
padding-right:0;
margin: 0 auto;
width:47%;
}
.secondaryNavigation-mobile a{
color:#fff;
}
.secondaryNavigation-mobile a:hover{
color:#tmcLightblue;
}
ul.secondaryNavigation-mobile li{
list-style:none;
width:47%;
display:inline-block;
margin-bottom:0px;
margin-right:3px;
padding-bottom:0;
padding-left:0;
padding-right:0;
vertical-align: top;
padding-bottom:15px;
}
.navbar-toggle{
font-size:medium;
}
.navbar-collapse{
background-color: rgba(0,58,99,0.80);
}
.navbar-nav{
margin:15px -15px;
}
.nav > li > a{
text-align:left;
padding-left:0px;
padding-right:0px;
color:#fff !important;
}
.nav > li > a:hover{
color:#tmcLightblue !important;
}
.nav > li{
margin:0px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
border-bottom:0px solid transparent;
color:#tmcLightblue !important;
}
.navbar-brand{
max-width:125px;
margin:0 0 0 5px;
}
#navbar-collapse-2, #navbar-collapse-1{
position: absolute;
width: 100%;
z-index: 2147483647;
}
.subscribe-input{
border-radius:0px;
border-color:#tmcDarkblue;
color:#tmcDarkgrey;
float:left;
margin-right:4px;
}
.search-form{
background-color:transparent !important;
color:#fff;
}
.mobileSearch-btn{
border-color: #fff;
background-color:transparent;
}
.mobileSearch-btn:hover{
border-color: #fff;
background-color:transparent;
}
.glyphicon-search {
color: #fff;
}
.glyphicon-arrow-right{
color: #fff;
}
.mobileLogin{
text-align:left;
}
.login-control{
float:none;
}
.user-input, .pass-input{
margin:0 0 5px 0;
width:100%;
float:none;
}
.dropdown-menu{
text-align:left;
}
.mobileDropdown{
background-color: transparent !important;
border: 1px solid #fff !important;
color: #fff;
margin: 5px 0 0;
padding: 6px 13px;
display: block;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
background-color: #fff;
padding: 5px 0;
}
.mobileList{
background-color: #fff !important;
border-radius: 0;
padding: 0;
}
.navbar-nav .open .mobileList{
position:absolute;
width:100%;
}
.mobileList li{
padding:4px 14px;
border-bottom:1px solid #tmcDarkblue;
}
.mobileNav{
margin-left: 0px;
margin-right: 0px;
}
}
What you want is the .dropdown-menu and .sub-menu classes.
To change the height of the menu try this:
.dropdown-menu
{
max-height: 400px;
}
Related
I'm sure this is a common problem with pure css navbar. I have a navbar created with ul and li's but I can't get the menus to stay up when I hover. I know that the problem is that the menu is opening ONLY when I'm hovering over the link but I'm not sure how to get it work. I tried jQuery mouseover but it wasn't working for me:
#font-face{
font-family: Bebas;
src:url(BEBAS.TTF);
}
body{
margin:0 auto;
height:500px;
font-family: Bebas;
}
.header{
top:0;
position:absolute;
left:0;
right:0;
background:#ff6200;
height:50px;
width:100%;
color:white;
font-family: Bebas;
}
.header .call{
line-height:50px;
}
.call{
width:60%;
margin:0 auto;
}
.login{
float:right;
}
.callme, .loginme{
color:#AF2626;
}
.signup{
margin-left:10px;
}
.number{
margin-left:10px;
}
.navbar{
margin-top:50px;
right:0;
left:0;
position:relative;
height:130px;
width:100%;
background:#F7F7F7;
border-radius:0px;
padding:0px;
}
.inside-navbar{
line-height:130px;
width:60%;
margin:0 auto;
font-size:40px;
}
.logo{
color:#FF6200;
}
#navsman{
font-size:16px;
float:right;
display:inline-block;
min-width:300px;
position:absolute;
padding-right: 20%;
}
#navsman li{
display:inline;
position:relative;
padding-left:15px;
line-height:1.4;
}
#navsman li ul{
position:absolute;
display:none;
}
#navsman li:hover > ul.firstmenu{
display:block !important;
margin-top: -50px;
}
#navsman li ul li{
position:relative;
padding-left:15px;
}
#navsman ul.secondmenu{
margin-left: 40px;
padding-top:15px;
padding-top: 30px;
z-index: 2;
width: 120px;
display:none;
}
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
#navsman ul.firstmenu li:hover ul.secondmenu{
display:block !important;
margin-top: -50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<div class="headwrapper">
<div class="header">
<div class="call"><span class="callme">CALL US NOW!</span> <span class="number">777.77.7777.777</span>
<span class="login"><span class="loginme">LOGIN </span><span class="signup">SIGNUP</span></span>
</div>
</div>
<div class="navbar">
<div class="inside-navbar">
<span>YOUR<span class="logo">LOGO</span></span>
<ul id="navsman">
<li>Title1</li>
<li class="title2">Title2
<ul class="firstmenu">
<li>SUBMENU1</li>
<li>SUBMENU2</li>
<li>SUBMENU3
<ul class="secondmenu">
<li class="secondli-first">Sub link 1</li>
<li class="secondli-second">Sub link 1</li>
</ul>
</li>
</ul>
<li>Title3</li>
<li>Title4</li>
<li>Title5</li>
<li>Title6</li>
<li>Title7</li>
</div>
</ul>
</div>
</div><!--Navbar end-->
</div>
Replace:
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
With:
#navsman > li:hover > ul li {
left: auto;
padding-top: 5px ;
min-width: 100%;
height: 10px;
margin-top:-15px;
padding-left: 10px;
}
Close the gap mentioned by #James Montagne
navsman li ul{
position:absolute;
display:none;
top:70px; <-- new line of code
}
Are there any css hacks to make come up with this image below with bootstrap nav-tab markup? Having the rounded corners with shadows in it?
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">ABOUT OUR SEASONINGS</li>
<li>GET RECIPE IDEAS</li>
<li>INGREDIENTS & NUTRITION INFO</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
</div>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
I'm thinking of making it
Here I provide the complete example to create bootstrap tab panel with a rounded border.
$(function(){
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
});
html{
margin: 20px 10px auto;
font-family: arial,sans-serif;
}
.nav:after,
.nav:before {
content:"";
display: table;
}
.nav:after {
clear:both;
overflow:hidden;
}
.nav {
zoom: 1;
margin-left: 20px;
padding-bottom: 3px;
}
.nav li {
list-style: none outside none;
float: left;
position: relative;
}
.nav .active {
z-index: 3;
}
.nav li:before,
.nav li:after,
.nav a:before,
.nav a:after {
content:"";
position: absolute;
bottom:0;
}
.nav a {
float: left;
padding: 10px 40px;
text-decoration: none;
color: #fff;
background: rgb(97, 142, 70);
border-radius: 5px 5px 0 0;
-webkit-transform: perspective(30) rotateX(10deg);
}
.nav .active a {
background: #F66599;
color:#BE3569;
-webkit-transform: perspective(30) rotateX(10deg);
}
.nav a:before {
left:-20px;
}
.nav a:after {
right: -20px;
}
.nav .active:before,
.nav .active:after {
z-index: 1;
background: #F66599;
}
.nav li:first-child a:before,
.nav li:last-child a:after {
background-color: #fff;
}
.tab-content {
background: rgba(60, 118, 61, 0.17);;
color:#444444;
padding: 20px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.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-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Portfolio</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Home page</div>
<div class="tab-pane" id="portfolio">Portfolio page</div>
<div class="tab-pane" id="messages">Messages page</div>
<div class="tab-pane" id="settings">Setting page</div>
</div>
To Add CSS shadows use following css
.tab-content { -webkit-box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); }
jsfiddle : jsfiddle link
Ref: w3codeschool.com
Try something like this
CSS:
.nav-tabs{
box-shadow: 0px 0px 10px #777;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
-webkit-transform: perspective(30) rotateX(10deg);
}
I have a website that has a dropdown menu and an input box. For user comfort, I am thinking it would be nice to have it so that when the user clicks on an option in the dropdown menu, the mouse cursor is immediately focused inside the input box so that they can begin typing right away, rather than having to click into it every time.
How can this be achieved?
Here is my Jsfiddle: http://jsfiddle.net/mlynn/jyrbepyz/3/
Thank you.
HTML
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b>Site</b></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
Home |
Generic |
Elements |
Sign Up
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
#
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter">
</form>
<br>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul>
</div>
</div>
<div class="Category1">
<!--list items that user assigned "1" from dropdown menu would be placed in this div-->
</div>
<div class="Category2">
</div>
<div class="Category3">
</div>
<div class="Category4">
</div>
<div class="Category5">
</div>
<div class="Category6">
</div>
<div class="Category7">
</div>
</section>
<section id="feety">
I believe I exist
</section>
CSS
/*adder*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:teal;
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #D9D9D9;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#222; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:teal; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
.Category1 {
background:blue;
}
.Category2 {
background:green;
}
.Category3 {
background:yellow;
}
.Category4 {
background:orange;
}
.Category5 {
background:purple;
}
.Category6 {
background:gold;
}
.Category7 {
background:maroon;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:gray;
border-width:1px;
width: 200px;
border-radius: 4px;
}
.ActiveListItem:after {
content: "\25BC\00a0\00a0"; /*carat and spaces*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
border-style:solid;
border-color:white;
border-radius:4px;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
}
ul.navbar li {
position: relative;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
min-width: 200px;
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
width: 60%;
margin: 0px auto;
}
form { }
input,
ul {
background: #eee;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
font-family:"Tahoma";
}
input {
padding: 10px 10px 10px 20px;
border: 1px solid #ccc;
}
.lister ul {
list-style: square inside;
padding: 10px;
}
.active { border: 1px solid #ccc; }
.inactive { display: none; }
.lister li {
padding: 10px;
font-weight: 600;
color: #34495e;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
.lister li:before {
content: "#"; /*carat and spaces*/
float:left;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
JS
// sub menus identification
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
$('.ActiveListItem').click(function(){
$('.navbar li ul').slideToggle(300);
});
});
//newList
$(document).ready(function() {
var ul = $('.lister ul'),
input = $('input');
input.focus();
$('form').submit(function () {
if (input.val() !== '') {
var inputVal = input.val(),
activeNumber = $('.ActiveListItem').text();
if (activeNumber == "1") {
/*I guess the fantasy code goes here...?*/
}
ul.append('<li>' + activeNumber + ' ' +inputVal + 'X</li>');
if (ul.hasClass('inactive')) {
ul.removeClass('inactive')
.addClass('active');
}
};
input.val('');
return false;
});
ul.on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
if (ul.children().length == 0) {
ul.removeClass('active')
.addClass('inactive');
input.focus();
}
});
});
You're using var ul = $('.lister ul')
Go take a look where is your .lister and the child ul in your HTML
I mean you probably want to target the needed DROPDOWN UL anchors
using the right selector:
$(".navbar.cf li ul li").on("click", "a", function(e){
e.preventDefault();
input.focus();
});
http://jsfiddle.net/jyrbepyz/5/
I have a navigation bar with a drop down menu. I have a + in front of the drop down menu inside a span. I would like the the plus to toggle to - when the menu is dropped down and back to + when the menu is up(hidden). How can I do this?
my html looks like
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals</li>
<li>Dresses</li>
<li>Jumpsuits</li>
</ul>
</li>
<li>Wholesale</li>
<li>Retailers</li>
<li>Contact</li>
</ul>
</nav>
I am currently using js to drop down my menu. Can I add to my current js to achieve this. My js looks like
$(document).ready(function() {
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
});
});
here is my css
nav{
position:relative;
display:block;
width:70%;
margin:0;
padding:3px 15%;
border-top:1px solid #d0d0d0;
text-align:center;
font:15px 'OpenSans';
z-index: 999;
}
nav ul{
position:relative;
width:100%;
margin:0;
padding:0;
}
nav li{
display:inline-block;
margin:0 10px;
padding:0;
}
nav li ul li{
position:relative;
display:block;
width:150px;
margin:0;
padding:0;
}
.shopList{
position:absolute;
display:none;
width:100px;
margin:0 0 0 -50px;
padding:0;
}
nav a{
position:relative;
display:block;
width:auto;
margin:0;
padding:0;
color:#707070;
text-decoration:none;
}
One solution is to compare previous text with new:
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
$("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
});
nav {
position: relative;
display: block;
width: 70%;
margin: 0;
padding: 3px 15%;
border-top: 1px solid #d0d0d0;
text-align: center;
font: 15px'OpenSans';
z-index: 999;
}
nav ul {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
padding: 0;
}
nav li ul {
display: none;
}
nav li ul li {
position: relative;
display: block;
width: 150px;
margin: 0;
padding: 0;
}
.shopList {
position: absolute;
display: none;
width: 100px;
margin: 0 0 0 -50px;
padding: 0;
}
nav a {
position: relative;
display: block;
width: auto;
margin: 0;
padding: 0;
color: #707070;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals
</li>
<li>Dresses
</li>
<li>Jumpsuits
</li>
</ul>
</li>
<li>Wholesale
</li>
<li>Retailers
</li>
<li>Contact
</li>
</ul>
</nav>
I am trying to change my menu icons and color of text on click.
in my menu Each
<li> element has a hyperlink tag there are 2 child below it <span class="icon"> and <div class="icon"> what i am trying to achieve is on click the class has to be changed to
<span class="icon active"> <div class="icon active"> and when the next menu item is clicked this active class has to be removed
JS Fiddel
HTML CODE
<div id="grid">
<div id="menuBase">
<div id="menu">
<ul>
<li></span><div class="icon" id="mtext">Menu1 </div></li>
<li><span class="icon" id="about"></span><div class="icon" id="mtext">Menu2</div></li>
<li><span class="icon" id="soln"></span><div class="icon" id="mtext">Menu 3</div></li>
<li><span class="icon" id="lab"></span><div class="icon" id="mtext">Menu4</div></li>
<li><span class="icon" id="port"></span><div class="icon" id="mtext">Menu5</div></li>
<li><span class="icon" id="contact"></span><div class="icon" id="mtext">Menu6</div ></li>
</ul>
</div>
</div>
</div>
CSS CODE
#grid{
width: 750px;
margin:0 auto;
}
#menuBase{
background: #fff;
width:100%;
height:44px;
-webkit-border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
border-radius: 90px 90px 0 0;
border-right:2px solid #fff;
}
#menu{
background: #E1E1E3;
width:100%;
height:100%;
-webkit-border-radius: 99px 99px 0 0;
-moz-border-radius: 99px 99px 0 0;
border-radius: 99px 99px 0 0;
border-right: 1px #fff solid;
border: 2px #ccc solid;
border-right: none;
border-bottom: none;
}
#hrhead{
background: #cccccc;
height: 3px;
-webkit-margin-before:0;
-webkit-margin-after:0;
border-bottom: 1px #ffffff solid;
}
#hrfoot{
background: #cccccc;
height: 3px;
-webkit-margin-before:0;
-webkit-margin-after:0;
border-top: 1px #ffffff solid;
}
#menu ul{
float:left;
width:100%;
padding-left:43px;
margin:0;
list-style-type:none;
}
#menu li{
display: block;
float: left;
width:40px;
height: 25px;
margin-right: 68px;
margin-top: 11px;
}
#menu li:last-child{
margin-right: 0px;
}
.icon{
height:25px;
width: 40px;
display: block;
color:#777777;
}
#mtext{
height:27px;
width: 80px;
display: block;
margin: 11px 0 0 -20px;
text-align: center;
}
#menu li a{
text-decoration:none;
}
#menu li a:hover #mtext{
color:#DC0000;
}
#menu li a:hover .icon{
background-position-y:24px;
}
#home{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#about{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#soln{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#lab{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#port{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
#contact{
background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}
.active{
background-position-y:24px !important;
color:#DC0000 !important;
}
Jquery [Damm i am lost]:
$("#menu > ul > li > a").click(function(e){
e.preventDefault();
});
DEMO : http://jsfiddle.net/VLXxR/8/
$("#menu > ul > li > a").click(function(e){
e.preventDefault();
$("#menu .icon").removeClass("active");
$(this).children(".icon").addClass("active")
});
DEMO : http://jsfiddle.net/VLXxR/7/
$("#menu > ul > li > a").click(function(e){
e.preventDefault();
$("#menu .icon").removeClass("active");
$(this).find(".icon").addClass("active")
});
Check out the documentation for removeClass - http://api.jquery.com/removeClass/
Your js should be like this ,FIDDLE
$("#menu > ul > li > a").click(function(e){
e.preventDefault();
$("#menu > ul > li > a > div,#menu > ul > li > a > span").removeClass('active');
$('div',this).addClass('active');
$('span',this).addClass('active');
});