<div class="navbar-header"></div>
<div class="navbar-header"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="smoth-scroll" href="#home">Home</a></li>
<li><a class="smoth-scroll" href="#aboutus">About Us</a></li>
<li><a class="smoth-scroll" href="#services">Services</a></li>
<li><a class="smoth-scroll" href="#ourteam">Our Team</a></li>
<li><a class="smoth-scroll" href="#testimonial">Testimonials</a></li>
<li><a class="smoth-scroll" href="#portfolio">Portfolio</a></li>
<li><a class="smoth-scroll" href="#contactus">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse --></nav>
================================================
7. Navigation
================================================
*/
.menu-bg {
z-index: 999;
}
.menu-bg .basement-logo {
padding-top: 5px;
transition: all 0.3s ease 0s;
}
.navbar-default {
background-color: inherit;
border-color: inherit;
}
.navbar {
border-radius: 0;
min-height: auto;
margin: 0;
border: none;
z-index: 9;
}
.navbar-collapse {
float: right;
margin: 0;
padding: 0;
}
.navbar-brand {
padding: 0;
height: auto;
}
.navbar-nav > li {
padding: 0;
margin: 0 0 0 1px;
}
.navbar-default .navbar-nav li a {
color: #000;
font-size: 13px;
font-weight: 600;
padding: 30px 13px;
transition: all 0.3s ease 0s;
text-transform: uppercase;
background-color: inherit;
font-family: "Roboto",sans-serif;
letter-spacing: 1px;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
background-color: #DC143C !important;
color: #000;
}
.menu-bg .navbar-default .navbar-nav li a {
padding: 20px 10px;
transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
background-color: #DC143C !important;
color: #000;
}
/*
I copy and pasted this from CSS code editor in file manager through my Cpanel account. I am trying to change the hover color to a red (#DC143C), but am failing miserably. I really appreciate your help so thanks in advance! I think it's obvious I am a novice and I am still trying to figure out the relationship between CSS, JavaScript, and HTML, so please have some patience. I've finally figured out basic networking, but this is a whole new ball game. Again, thanks so much for your help.
You had forgot to add ul before li in css. use below code it works.
<html>
<head>
<style>
.menu-bg {
z-index: 999;
}
.menu-bg .basement-logo {
padding-top: 5px;
transition: all 0.3s ease 0s;
}
.navbar-default {
background-color: inherit;
border-color: inherit;
}
.navbar {
border-radius: 0;
min-height: auto;
margin: 0;
border: none;
z-index: 9;
}
.navbar-collapse {
float: right;
margin: 0;
padding: 0;
}
.navbar-brand {
padding: 0;
height: auto;
}
.navbar-nav > li {
padding: 0;
margin: 0 0 0 1px;
}
.navbar-default .navbar-nav li a {
color: #000;
font-size: 13px;
font-weight: 600;
padding: 30px 13px;
transition: all 0.3s ease 0s;
text-transform: uppercase;
background-color: inherit;
font-family: "Roboto",sans-serif;
letter-spacing: 1px;
}
.navbar-default .navbar-nav > ul > li > a:focus, .navbar-default .navbar-nav > ul > li > a:hover {
background-color: #DC143C !important;
color: #000;
}
.menu-bg .navbar-default .navbar-nav ul li a {
padding: 20px 10px;
transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
background-color: #DC143C !important;
color: #000;
}
</style>
</head>
<body>
<div class="navbar-default">
<div class="navbar-nav" >
<ul>
<li style="height:50px;">
dfsdgdsgs </li>
</div>
</div>
</body>
</html>
Just simply insert the below css code to your CSS file. And I've provided the Codepen Link For you Check that
https://codepen.io/anon/pen/dePmEY
.navbar-collapse ul li a:hover{
color:black;
background-color:#DC143C;
}
For further queries please provide your HTML code.
.menu-bg {
z-index: 999;
}
.menu-bg .basement-logo {
padding-top: 5px;
transition: all 0.3s ease 0s;
}
.navbar-default {
background-color: inherit;
border-color: inherit;
}
.navbar {
border-radius: 0;
min-height: auto;
margin: 0;
border: none;
z-index: 9;
}
.navbar-collapse {
float: right;
margin: 0;
padding: 0;
}
.navbar-brand {
padding: 0;
height: auto;
}
.navbar-nav > li {
padding: 0;
margin: 0 0 0 1px;
}
.navbar-default .navbar-nav li a {
color: #000;
font-size: 13px;
font-weight: 600;
padding: 30px 13px;
transition: all 0.3s ease 0s;
text-transform: uppercase;
background-color: inherit;
font-family: "Roboto",sans-serif;
letter-spacing: 1px;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
background-color: #DC143C !important;
color: #000;
}
.menu-bg .navbar-default .navbar-nav li a {
padding: 20px 10px;
transition: all 0.3s ease 0s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
background-color: #DC143C !important;
color: #000;
}
.navbar-collapse ul li a:hover{
color:black;
background-color:#DC143C;
}
<div class="navbar-header"></div>
<div class="navbar-header"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="smoth-scroll" href="#home">Home</a></li>
<li><a class="smoth-scroll" href="#aboutus">About Us</a></li>
<li><a class="smoth-scroll" href="#services">Services</a></li>
<li><a class="smoth-scroll" href="#ourteam">Our Team</a></li>
<li><a class="smoth-scroll" href="#testimonial">Testimonials</a></li>
<li><a class="smoth-scroll" href="#portfolio">Portfolio</a></li>
<li><a class="smoth-scroll" href="#contactus">Contact Us</a></li>
</ul>
</div>
Related
when i click on the navbar icon on my mobile/tablet the navabr opens but then it goes away, but the navbar still thinks that the navbar is open, when i reclick on the navbar icon it closes then (can't see it close), but when i click again to open it, it's still the same.
I added a gif(sorry for the low resolution) to show you what i get.GIF
The Navbar code:
<div class="navbar-fixed-top">
<div id="menu">
<div class="menu--topbar">
<div class="container">
<div class="menu-topbar--contact">
<ul class="nav navbar-nav">
<li><a style="color:#fff" href="MAILTO:XXXXXXXXXXXXXXXXXXXXX"><i class="fa fa-envelope"></i><span href="mailto:XXXXXXXXXXXXXXXXXXXXX"></span>EMAILXXXXX</a></li>
<li><a style="color:#fff" href="tel:XXXXXXXXXX"><i class="fa fa-phone"></i><span href="tel:XXXXXXXXX"></span> XXXXXXXXX</a></li>
</ul>
</div>
</div>
</div>
<nav id="secondaryMenu" class="navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondaryNavbar" aria-expanded="false" aria-controls="secondaryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<div class="login-btn hidden-lg hidden-md hidden-sm"> Nefsani </div>
</div>
<div id="secondaryNavbar" class="reset-padding navbar-collapse collapse ">
<ul class="secondary-menu-links nav navbar-nav">
<li>Home</li>
<li>Over mezelf</li>
<li class="dropdown"> Mijn aanbod<span class="caret"></span>
<ul class="dropdown-menu">
<li>relatietherapie</li>
<li>individuele therapie </li>
<li>persoonlijke consultgesprekken</li>
</ul>
</li>
<li>Tarieven en terugbetaling</li>
<li>Contacteer mij</li>
</ul>
<ul class="secondary-menu-links nav navbar-nav navbar-right hidden-xs">
<li>Nefsani</li>
</ul>
</div>
</div>
</nav>
The Navbar CSS:
#secondaryMenu {
position: relative;
margin-bottom: 0;
background-color: #54bceb;
border: none;
border-radius: 0;
box-shadow: none;
z-index: 1;
}
#secondaryMenu.sticky {
position: fixed;
box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
#secondaryMenu .navbar-toggle {
border: none;
}
#secondaryMenu .navbar-toggle .icon-bar {
background-color: #fff;
}
#secondaryMenu a.navbar-brand {
display: block;
padding: 10px 0;
margin-top: 18px;
margin-left: 0;
color: #303030;
font-size: 24px;
font-weight: 700;
}
#secondaryMenu a.navbar-brand span {
color: #4584b4;
}
#secondaryMenu .navbar-header .login-btn > .btn {
color: #fff;
background-color: #303030;
border: none;
border-radius: 0;
-webkit-transition: color .25s ease,background-color .25s ease-in-out;
transition: color .25s ease,background-color .25s ease-in-out;
}
#secondaryMenu .navbar-header .login-btn > .btn:focus, #secondaryMenu .navbar-header .login-btn > .btn:hover {
color: #303030;
background-color: #fff;
box-shadow: none;
outline: 0;
}
.secondary-menu-links li a {
margin-right: 3px;
padding: 24px 14px 21px;
border-bottom: 3px solid transparent;
color: #fff;
font-size: 18px;
line-height: 22px;
font-weight: 700;
-webkit-transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease;
transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease;
}
.secondary-menu-links li:last-child a {
margin-right: 0;
}
.secondary-menu-links > .dropdown > a > .caret {
margin-left: 8px;
}
.secondary-menu-links li a .fa {
display: block;
margin: 0 auto 3px;
font-size: 20px;
}
.secondary-menu-links .open > a, .secondary-menu-links .open > a:focus, .secondary-menu-links .open > a:hover, .secondary-menu-links li a:focus, .secondary-menu-links li a:hover, .secondary-menu-links li.active > a, .secondary-menu-links li.active > a:hover {
background-color: transparent;
border-color: #fff;
}
.secondary-menu-links > .dropdown:hover > .dropdown-menu {
display: block;
}
.secondary-menu-links li .dropdown-menu {
padding: 0;
background-color: #fff;
border-style: solid;
border-width: 3px 0;
border-color: #fff;
border-radius: 0;
}
.secondary-menu-links li .dropdown-menu li a {
margin-right: 0;
padding: 10px 15px;
color: #303030;
font-size: 16px;
line-height: 20px;
border: none;
}
.secondary-menu-links > .dropdown > .dropdown-menu > li.active > a, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:hover, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:hover {
color: #fff;
background-color: #00678d;
}
.secondary-menu-links.navbar-right {
padding-right: 15px;
}
.secondary-menu-links > li > a.btn {
padding: 24px 30px;
color: #fff;
background-color: #303030;
border: none;
border-radius: 0;
-webkit-transition: color .25s ease,background-color .25s ease-in-out;
transition: color .25s ease,background-color .25s ease-in-out;
}
.secondary-menu-links > li > a.btn:focus, .secondary-menu-links > li > a.btn:hover {
color: #303030;
background-color: #fff;
box-shadow: none;
}
If you need any more informaton let me know.
thanks in advance!
try with all these includes, working fine now.
<!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>
<style>
#secondaryMenu {
position: relative;
margin-bottom: 0;
background-color: #54bceb;
border: none;
border-radius: 0;
box-shadow: none;
z-index: 1;
}
#secondaryMenu.sticky {
position: fixed;
box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
#secondaryMenu .navbar-toggle {
border: none;
}
#secondaryMenu .navbar-toggle .icon-bar {
background-color: #fff;
}
#secondaryMenu a.navbar-brand {
display: block;
padding: 10px 0;
margin-top: 18px;
margin-left: 0;
color: #303030;
font-size: 24px;
font-weight: 700;
}
#secondaryMenu a.navbar-brand span {
color: #4584b4;
}
#secondaryMenu .navbar-header .login-btn > .btn {
color: #fff;
background-color: #303030;
border: none;
border-radius: 0;
-webkit-transition: color .25s ease,background-color .25s ease-in-out;
transition: color .25s ease,background-color .25s ease-in-out;
}
#secondaryMenu .navbar-header .login-btn > .btn:focus, #secondaryMenu .navbar-header .login-btn > .btn:hover {
color: #303030;
background-color: #fff;
box-shadow: none;
outline: 0;
}
.secondary-menu-links li a {
margin-right: 3px;
padding: 24px 14px 21px;
border-bottom: 3px solid transparent;
color: #fff;
font-size: 18px;
line-height: 22px;
font-weight: 700;
-webkit-transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease;
transition: color .25s ease,background-color .25s ease-in-out,border-color .25s ease;
}
.secondary-menu-links li:last-child a {
margin-right: 0;
}
.secondary-menu-links > .dropdown > a > .caret {
margin-left: 8px;
}
.secondary-menu-links li a .fa {
display: block;
margin: 0 auto 3px;
font-size: 20px;
}
.secondary-menu-links .open > a, .secondary-menu-links .open > a:focus, .secondary-menu-links .open > a:hover, .secondary-menu-links li a:focus, .secondary-menu-links li a:hover, .secondary-menu-links li.active > a, .secondary-menu-links li.active > a:hover {
background-color: transparent;
border-color: #fff;
}
.secondary-menu-links > .dropdown:hover > .dropdown-menu {
display: block;
}
.secondary-menu-links li .dropdown-menu {
padding: 0;
background-color: #fff;
border-style: solid;
border-width: 3px 0;
border-color: #fff;
border-radius: 0;
}
.secondary-menu-links li .dropdown-menu li a {
margin-right: 0;
padding: 10px 15px;
color: #303030;
font-size: 16px;
line-height: 20px;
border: none;
}
.secondary-menu-links > .dropdown > .dropdown-menu > li.active > a, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li.active > a:hover, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:focus, .secondary-menu-links > .dropdown > .dropdown-menu > li > a:hover {
color: #fff;
background-color: #00678d;
}
.secondary-menu-links.navbar-right {
padding-right: 15px;
}
.secondary-menu-links > li > a.btn {
padding: 24px 30px;
color: #fff;
background-color: #303030;
border: none;
border-radius: 0;
-webkit-transition: color .25s ease,background-color .25s ease-in-out;
transition: color .25s ease,background-color .25s ease-in-out;
}
.secondary-menu-links > li > a.btn:focus, .secondary-menu-links > li > a.btn:hover {
color: #303030;
background-color: #fff;
box-shadow: none;
}
</style>
</head>
<body>
<div class="navbar-fixed-top">
<div id="menu">
<div class="menu--topbar">
<div class="container">
<div class="menu-topbar--contact">
<ul class="nav navbar-nav">
<li><a style="color:#fff" href="MAILTO:XXXXXXXXXXXXXXXXXXXXX"><i class="fa fa-envelope"></i><span href="mailto:XXXXXXXXXXXXXXXXXXXXX"></span>EMAILXXXXX</a></li>
<li><a style="color:#fff" href="tel:XXXXXXXXXX"><i class="fa fa-phone"></i><span href="tel:XXXXXXXXX"></span> XXXXXXXXX</a></li>
</ul>
</div>
</div>
</div>
<nav id="secondaryMenu" class="navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondaryNavbar" aria-expanded="false" aria-controls="secondaryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<div class="login-btn hidden-lg hidden-md hidden-sm"> Nefsani </div>
</div>
<div id="secondaryNavbar" class="reset-padding navbar-collapse collapse ">
<ul class="secondary-menu-links nav navbar-nav">
<li>Home</li>
<li>Over mezelf</li>
<li class="dropdown"> Mijn aanbod<span class="caret"></span>
<ul class="dropdown-menu">
<li>relatietherapie</li>
<li>individuele therapie </li>
<li>persoonlijke consultgesprekken</li>
</ul>
</li>
<li>Tarieven en terugbetaling</li>
<li>Contacteer mij</li>
</ul>
<ul class="secondary-menu-links nav navbar-nav navbar-right hidden-xs">
<li>Nefsani</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
You may be using outdated version of bootstrap link to import its javascript file. After updating the link, the problem was solved for me.
Hope it helps someone!
i have been playing around with bootstrap to setup a navbar the way i would like it to be.
I am struggling as you might see in my code to have everything vertically centered properly in this menu. I have made some average fix by playing with the margin but i can't fix the button.
I am sure there is a simple solution with position:relative to have everything center but i can't find it.
http://codepen.io/anon/pen/yMGEZb
Thanks for your help !
updated codepen
Just add the button inside navbar-right li.no need to modify your css.
example snippet
.navbar-default .navbar-header .navbar-brand {
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
font-weight: 200;
letter-spacing: 1px;
color: #fdcc52;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #fcbd20;
}
.navbar-default .navbar-header .navbar-toggle {
font-size: 12px;
color: #222222;
padding: 8px 10px;
}
.navbar-default .nav > li > a {
font-family: Montserrat;
font-weight:300;
font-style:normal;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
color: #121212;
}
/*#media (min-width: 768px)
.button-nav {
display: inline-block;
z-index: 101;
}*/
.button-nav {
position: relative;
bottom: 50%;
background-color: transparent;
font-family: Montserrat;
font-weight: 300;
font-style:normal;
letter-spacing:2px;
font-size: 13px;
color: #121212;
text-transform: uppercase;
border: 1px solid #121212;
padding: 18px 40px;
transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1);
cursor:pointer;
text-align:center;
text-rendering: optimizeLegibility;
}
.button-nav:hover {
background-color: #1c1c1c;
font-family: Montserrat;
font-weight: 300;
font-style:normal;
letter-spacing:2px;
font-size: 13px;
color: white;
text-transform: uppercase;
border: 1px solid #1c1c1c;
padding: 18px 40px;
transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1);
cursor:pointer;
text-align:center;
text-rendering: optimizeLegibility;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
color: #121212;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: #fdcc52;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
color: #fdcc52 !important;
background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
background-color: transparent;
}
#media (min-width: 768px) {
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-default .navbar-header .navbar-brand {
color: rgba(34, 34, 34, 0.1);
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: white;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
color: #121212;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: white;
}
.navbar-default.affix {
background-color: white;
border-color: rgba(34, 34, 34, 0.1);
}
.navbar-default.affix .navbar-header .navbar-brand {
color: #222222;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #fdcc52;
}
.navbar-default.affix .nav > li > a,
.navbar-default.affix .nav > li > a:focus {
color: #222222;
}
.navbar-default.affix .nav > li > a:hover,
.navbar-default.affix .nav > li > a:focus:hover {
color: #fdcc52;
}
}
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container" style="height:80px;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img src="http://svgshare.com/i/17J.svg" width="220" height="50" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:20px;">
<li>
<a class="page-scroll" href="#download">Download</a>
</li>
<li>
<a class="page-scroll" href="#features">Features</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li><button class="button-nav pull-right">Get started</button></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
My centered menu bar wraps on screens smaller than desktop mode picture attached and I've tried several css code to make menu items appear on a single line which have not worked. Can anyone help me with this?
This is the bit of code I added in my CSS editor to center the navigation bar:
#navigation {
position: relative;
}
#main-nav {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 24%;
}
.nav li:hover, .nav li.hover {
position: relative;
}
.nav li ul li {
left: 0;
}
I noticed especially that the .nav li part controls the positioning of the navigation bar.
My html code for the navigation bar is below:
<div class="col-sm-6 col-md-3 footer-sidebar-wrap">
<aside id="nav_menu-2" class="widget widget_nav_menu"><h3 class="widget-title">Menu</h3><div class="menu-primary-menu-container"><ul id="menu-primary-menu-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-260">Home</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116">Shop</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117">About</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113">Contact</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-114">News</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115">Account</li>
</ul></div></aside> </div>
The full css code for the navigation bar is here:
.page .navbar-custom {
background-color: rgba(10, 10, 10, .9) !important;
}
.navbar-custom {
background-color: rgba(10, 10, 10, .9);
border: 0;
border-radius: 0;
z-index: 1000;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 11px;
-webkit-transition: background, padding 0.4s ease-in-out 0s;
-moz-transition: background, padding 0.4s ease-in-out 0s;
-ms-transition: background, padding 0.4s ease-in-out 0s;
-o-transition: background, padding 0.4s ease-in-out 0s;
transition: background, padding 0.4s ease-in-out 0s;
}
.navbar a {
-webkit-transition: color 0.125s ease-in-out 0s;
-moz-transition: color 0.125s ease-in-out 0s;
-ms-transition: color 0.125s ease-in-out 0s;
-o-transition: color 0.125s ease-in-out 0s;
transition: color 0.125s ease-in-out 0s;
}
.navbar-custom .sub-menu,
.navbar-custom .children {
background: rgba(26, 26, 26, .9);
border-radius: 0;
border: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-custom .navbar-brand {
letter-spacing: 4px;
font-weight: 400;
font-size: 22px;
color: #fff;
}
.navbar-custom .sub-menu li,
.navbar-custom .children li {
list-style:none;
}
.navbar-custom .sub-menu li a,
.navbar-custom .children li a {
width:100%;
display:block;
}
.navbar-custom .nav li > a {
position: relative;
color: rgba(255, 255, 255, .7);
}
.navbar-custom .sub-menu > li > a,
.navbar-custom .children > li > a {
border-bottom: 1px solid rgba(73, 71, 71, 0.15) !important;
padding: 11px 15px;
letter-spacing: 2px;
color: #999;
}
.navbar-custom .sub-menu .sub-menu,
.navbar-custom .children .children {
border-left: 1px solid rgba(73, 71, 71, 0.15);
left: 100%;
right: auto;
top: 0;
margin-top: 0;
}
.navbar-custom .sub-menu.left-side .sub-menu,
.navbar-custom .children.left-side .children {
border: 0;
border-right: 1px solid rgba(73, 71, 71, 0.15);
right: 100%;
left: auto;
}
.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > li > a:hover,
.navbar-custom .nav .open > a,
.navbar-custom .nav .open > a:focus,
.navbar-custom .nav .open > a:hover,
.navbar-custom .sub-menu > li > a:focus,
.navbar-custom .sub-menu > li > a:hover {
background: none;
color: #fff;
}
.navbar-custom .sub-menu > li > a:hover,
.navbar-custom .children > li > a:hover {
background: rgba(255, 255, 255, .1) !important;
}
.navbar-custom .menu-item-has-children-toggle:after {
position: absolute;
display: block;
right: 0;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 'ElegantIcons';
font-size: 9px;
content: "\43";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar-custom .navbar-toggle .icon-bar {
background: #fff;
}
.navbar-nav .menu-item-has-children>a:after,
.navbar-nav .page_item_has_children>a:after {
position: absolute;
display: block;
right: 0;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 ElegantIcons;
font-size: 9px;
content: "\43";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar-nav .sub-menu,
.navbar-nav .children {
min-width: 180px;
font-size: 11px;
}
.navbar-right ul {
text-align: left;
}
/* Navbar search */
.menu-item-has-children-search {
position: relative;
padding: 5px;
}
.menu-item-has-children-search .form-control {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
}
.search-btn {
position: absolute;
background: transparent;
border: none;
overflow: hidden;
top: 50%;
right: 1px;
width: 42px;
height: 40px;
line-height: 38px;
font-size: 14px;
outline: none;
color: #999;
margin-top: -20px;
}
This occurs because your <li> elements are exceeding the width of the parent <ul> element.
I imagine you could use
li {
white-space: nowrap;
}
This will stop the wrap behavior, however, will not be centered.
I would solve this issue with media queries, or making your parent <ul> element wider in general.
To use media queries use the following template:
#media (max-width: 1000px) {
//place the CSS you want to be activated when the screen is smaller than 1000px here
ul{
width: 1000px;
}
li{
font-size: 10px;
}
}
One other thing that could occur is white-space between <li> or <h3> elements. The reason this is a problem is if those six <li> or <h3> tags' width all equal 100%, then those extra spaces will go over 100% width making the last element fall to the next line. The below code might do the trick.
h3 {
padding:0;
margin:0;
}
How can I make other slide-down menus close when clicking on another menu item? Right now all menu items are opening one by one and they can only be closed by clicking on the item again.
Here's a demo: http://bootsnipp.com/snippets/33qKz
And here's the code
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
/* Adding gvnix styles css - NO COPIAR */
#import 'http://geo-gvnix.rhcloud.com/resources/styles/standard.css';
/* Custom fixed navs */
header.navbar+nav.navbar {
/* margin-top: 20px;same margin-bottom .navbar */
}
.navbar.navbar-default.navbar-fixed-top {
margin-top: 50px;
}
.sidebar.navbar-fixed-top {
margin-top: 100px;
}
#media (min-width: 768px) and (max-width: 998px) {
.navbar.navbar-default.navbar-fixed-top {
margin-top: 100px;
}
.sidebar.navbar-fixed-top {
margin-top: 150px;
}
}
/* Custom navbar default: global*/
.navbar.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
margin: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-brand {
color: #666;
text-shadow: none;
min-width: 150px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a:hover {
color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a {
color: #fff;
background-color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a:hover {
color: #608224;
background-color: #acc47f;
}
.navbar.navbar-default .caret {
border-top-color: #ccc;
border-bottom-color: #ccc;
}
.navbar.navbar-default .caret:hover {
border-top-color: #333;
border-bottom-color: #333;
}
/* Custom sidebar menu */
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar,
.main {
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main {
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
#media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main {
position: absolute;
width: calc(100% - 40px);
/*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main {
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand,
nav.sidebar .navbar-header {
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a {
padding-right: 13px;
min-width: 100px;
}
/*custom sidebar nav*/
nav.sidebar ul.nav.navbar-nav {
margin: 0;
}
nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child {
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li {
border-bottom: 1px #e5e5e5 solid;
}
/*adds background on hover*/
nav.sidebar .navbar-nav > li:hover {
color: #fff;
background-color: #43600E;
}
/*removes border last element*/
nav.sidebar .navbar-nav > li.last {
border-bottom: none;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse,
nav.sidebar .container-fluid {
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*O quanto o menu irá esconder á esquerda*/
/*gives sidebar width/height*/
nav.sidebar {
width: 200px;
height: 100%;
margin-left: -270px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover {
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate {
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
#media (min-width: 1330px) {
/* Allow main to be next to Nav
.main{
width: calc(100% - 200px); keeps 100% minus nav size
margin-left: 200px;
}
Show all nav
nav.sidebar{
margin-left: 0px;
float: left;
}
Show hidden items on nav
nav.sidebar .forAnimate{
opacity: 1;
} */
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate {
opacity: 1;
}
/*---- FIM SLIDE MENU*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--nav sidebar -->
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <i class="fa fa-gift fa-lg btn pull-right" style="margin-top:5px"></i>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation
</li>
<li>General
</li>
<li>Buttons
</li>
<li>Tabs & Accordions
</li>
<li>Typography
</li>
<li>FontAwesome
</li>
<li>Slider
</li>
<li>Panels
</li>
<li>Widgets
</li>
<li>Bootstrap Model
</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
</nav>
</aside>
<div class="main">
</div>
Your HTML structure is not quite what Bootstrap expects and you won't be able to use the easy way of data-parent attribute on this structure (the items should be divs and have the class panel anyway). Please see documentation for more info if interested. But for your problem and something you can make work directly into your HTML. I added toggle-this class to all the parent menu items which are toggled and added the attribute data-parent="menu-content" to them also. Then I just use this jQuery function to see if there are any menus expanded on click and collapse all the other than the one just clicked like this:
$(document).on('click', '.toggle-this', function(event) {
event.stopPropagation();
var $this = $(this);
var parent = $this.data('parent');
var actives = $('#' + parent).find('[aria-expanded="true"]');
if (actives && actives.length) {
hasData = actives.data('collapse');
actives.collapse('hide');
}
var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7
$(target).collapse('toggle');
});
Here's a working JSFiddle: https://jsfiddle.net/thepio/x5j6v5fq/
Your html does not follow the documentation from bootstrap.
The right structure should be something like this:
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
UI Elements <span class="caret"></span>
<ul class="dropdown-menu">
<li>CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
...
</ul>
</li>
...
</ul>
I relize that this would mean you have to re-style some parts of your navigation, but it gives you the functionality that you want.
For more information check bootstraps documentation about navbars
Alternative you can make a little script to change/remove classes on the opened menu items when you click a new one.
I have a dropdown menu that is generated from WordPress so I do not want to change the HTML of it. i can change the CSS as needed though and I pretty much have ot working as I need it with the exception of an alignment issue with my dropdown menu.
Google Chrome
FireFox
Internet Explorer
From the images above you can see that IE and FIreFox display it the same but Chrome is always different from the 2. My Goal is to get this box to align perfectly with the right of the menu button and then get it to look that way in all 3 of these browsers.
I have extracted the HTML and CSS into a JSFiddle page for testing and playing around with here...
Code View: http://jsfiddle.net/jasondavis/hAb4k/
Full View for viewing the menu: http://jsfiddle.net/jasondavis/hAb4k/embedded/result/
My HTML
<nav id="head-nav-menu" class="nav-main" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul id="nav" class="nav nav-pills">
<li class="active menu-home">
Home
</li>
<li class="menu-about">
About
</li>
<li class="menu-projects">
Projects
</li>
<li class="menu-blog">
Blog
</li>
<li class="dropdown menu-services">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/services/">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-consulting">Consulting</li>
<li class="menu-magento-development">
Magento Development
</li>
<li class="menu-wordpress-development">
WordPress Development
</li>
<li class="menu-sugarcrm-development">
SugarCRM Development
</li>
<li class="menu-web-development">
Web Development
</li>
<li class="menu-seo">
SEO
</li>
</ul>
</li>
<li class="menu-contact">
Contact
</li>
</ul>
</nav>
CSS
body{
background: #40C8F4 !important;
}
nav ul, nav ol {
list-style: none;
list-style-image: none;
}
#head-nav-menu{
float: right;
margin-top: 29px;
}
#head-nav-menu li {
float: left;
position: relative;
padding: 0 2px 0 2px;
}
.nav a {
font-family: 'arial';
font-size: 18px;
padding: 8px 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
white-space: nowrap;
color: #fff;
opacity: 0.9;
letter-spacing: 1px;
text-decoration: none;
}
.menu-contact a {
border: 2px solid #FFF;
padding: 8px 18px;
transition: 0.05s linear;
-moz-transition: 0.05s linear;
-webkit-transition: 0.05s linear;
}
.nav .menu-contact a:hover {
background-color: #FFF;
color: #797979;
}
#nav ul a {
font-weight: 100;
}
.nav a:hover,
.nav > .active a {
opacity: 1;
background-color: #3DBCE6;
}
.nav > .active li a {
background-color: inherit;
}
.tinynav {
display: none;
width: 100%;
margin-top: .5em;
margin-bottom: .6em;
}
.nav li.button a {
background-color: rgba(255, 255, 255, 0.1);
border: 2px solid #FFF;
border-radius: 4px;
margin-top: 5px;
padding: 8px 18px;
font-family: 'ProximaNova-bold', Helvetica, Arial, sans-serif;
font-weight: normal;
margin-left: 16px;
color: #FFF !important;
}
.nav li.button a:hover {
background-color: #FFF;
opacity: 1;
color: #444 !important;
}
/* ==========================================================================
Main Container General Layout Styles
========================================================================== */
.header-container header {
padding-top: 13px;
padding-bottom: 18px;
}
/* Navigation > Dropdown Menus */
#nav .dropdown-menu,
#nav .children {
display: none;
padding: 0;
position: absolute;
z-index: 99999;
border: 1px solid #86DEFC;
width: 333%;
/*right: 8px;*/
left: -239%;
top: 23px;
background-color: #F2F9FC;
}
#nav .dropdown-menu li {
width: 195px;
float: left;
display: inline-block;
/*width: 50%;*/
}
.nav .dropdown-menu a {
color: #030303;
}
#nav li:hover > ul,
#nav ul li:hover > ul,
.dropdown:hover > ul {
display: inline-block;
-webkit-animation: fadeDown 250ms ease;
-moz-animation: fadeDown 250ms ease;
-ms-animation: fadeDown 250ms ease;
-o-animation: fadeDown 250ms ease;
animation: fadeDown 250ms ease;
background-color: #fff;
color: #000;
border: 1px solid #E9E9E9;
border-top: none;
}
#nav .dropdown-menu ul,
#nav .children ul {
left: 99.75%;
top: -1px;
}
#nav ul li,
#nav ul ul li {
margin-left: 0;
}
#nav ul li:first-child,
#nav ul ul li:first-child {
border-top: none;
}
#nav ul a,
#nav ul ul a {
font-size: 14px;
line-height: 21px;
text-align: left;
padding: 10px;
display: inline-block;
min-width: 125px;
border-bottom: none;
margin-bottom: 0 !important;
width: 100%;
letter-spacing: 1px;
font-family: arial;
}
#nav ul a:hover,
#nav ul ul a:hover {
color: #098EB9 !important;
background: none;
}
#nav ul ul.dropdown-menu a:hover {
width: 100%;
color: #63E924 !important;
border-bottom: none;
}
#nav li.current_page_item ul a,
#nav li.current-menu-parent ul a,
#nav li.current_page_parent ul a {
color: #000;
font-weight: 700;
}
#nav ul li.current-menu-item a {
color: #e9242e !important;
}
#head-nav-menu .nav li:hover a.dropdown-toggle {
background: #fff;
color: #000;
opacity: 1;
border-right: 1px solid #E7E7E7;
}
.nav .dropdown a:hover {
opacity: 1;
background-color: #fff;
}
#nav .dropdown-menu li:hover {
background: #F8F8F8;
}
Give display: block to .nav a
then remove left: 239% of #nav .dropdown-menu and give right: 2px and top: 38px to it.
Here is the edited demo for it.
http://jsfiddle.net/hAb4k/3/