I'm using the latest version of Bootstrap and the Navbar collapses into responsive view at 1320px.
How can I adjust this so that the navbar only collapses into responsive view below 1280px? All the questions I've seen on SO have been to increase the breakpoint, where I would like to reduce it.
You can write a specific media query for that,
#media (max-width: 768px) {
.collapse {
display: none !important;
}
}
I will update this answer for you if you post your code.
Thanks for the suggestion, the below code is what was needed in order to decrease the break point and keep the desktop version of the navigation bar.
#media only screen
and (min-width: 1170px) {
.navbar-toggle {
display: none;
}
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li,
.navbar-header {
float: left;
}
#navbar-settings {
float: right;
}
.navbar-nav > li > a {
padding: 12px 36px;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-nav .open .dropdown-menu {
position: absolute;
float: none;
width: auto;
margin-top: 0;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
color: #626366 !important;
text-decoration: none;
background-color: #f5f5f5;
}
}
Related
I have created a custom top-header with CSS ID 'top-header'. But, it is showing up on top of my navigation menu instead of below it.
I have tried changing the top-header position from 'absolute' to 'fixed', as well as change the top pixels from 3px to 300px but nothing changed.
Edit: I am using Divi to build a website.
I input the following code to the bottom of the functions.php:
function custom_header ( $main_header ) {
$custom_header .= do_shortcode('[et_pb_section global_module="38561"][/et_pb_section]');
return $custom_header . $main_header;
}
add_filter( 'et_html_main_header', 'custom_header' );
Any suggestions?
Photo of top-header on top of navigation menu
#main-header {
box-shadow: 0 0px 50px rgba(0, 0, 0, .1);
}
#main-header.et-fixed-header {
box-shadow: 0 0px 25px rgba(0, 0, 0, .1) !important;
}
#top-header #et-info {
position: absolute;
top: 3px;
}
#et-info-phone:before, #et-info-email:before {
margin-right: 8px;
position: relative;
top: 2px;
}
#et-secondary-menu {
position: relative;
top: 2px;
}
#et-secondary-menu a {
font-size: 18px;
}
#media screen and (max-width : 600px) {
#top-header #et-info {
line-height: 1.5em;
}
}
/*
/////////////////////////////////////////////////
NAVIGATION
/////////////////////////////////////////////////
*/
#main-header .nav li ul a {
color: #000;
}
#main-header .nav li ul a:hover {
background-color: transparent;
}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {
top: -2px;
}
li.sfly_social_media_menu_icon .fab {
font-weight: 300;
}
#et_top_search {
margin-top: 0;
}
#top-menu ul.sub-menu {
width: 300px;
box-shadow: 0 20px 80px rgba(0,0,0,.2);
}
#top-menu ul.sub-menu li {
font-size: 12px;
line-height: 1.2em;
}
#top-menu ul.sub-menu li a {
width: 260px;
padding: 15px 20px;
}
#media screen and (max-width : 980px) {
.et_mobile_menu {
background-color: rgba(0,0,0,.9);
box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, .25);
text-align: center;
}
.et_mobile_menu li a {
color: #fff !important;
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
letter-spacing: 4px;
padding: 15px 5%;
}
.et_mobile_menu li li {
padding-left: 0;
}
.et_mobile_menu li li a {
font-size: 18px;
padding: 6px 5%;
}
.et_mobile_menu li li:last-child a {
padding-bottom: 12px;
}
.et_mobile_menu li.sfly_social_media_menu_icon, .et_mobile_menu li.sfly_social_media_menu_icon a {
display: inline-block;
}
.et_mobile_menu li.sfly_social_media_menu_icon a {
padding: 25px 10px;
}
}
#media screen and (max-width : 600px) {
.et_mobile_menu li.sfly_social_media_menu_icon a {
font-size: 20px;
}
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Despite the fact my original account mysteriously disappeared, here's my question for the geniuses over on this site:
For a long time now, I've been 'attempting' to build a response Wordpress theme from scratch so that I can keep all of my ideas on one website. The issue happens to be with the navigation menu. I have a bit of CSS doing the justice on mobile platforms under 600px in width. However, on screens larger than 600px, I have the navbar set so that it's fixed on the webpage and maintains its position when scrolling up and down. When a screen smaller than 600px visits the site, I have it set so that the navbar should change from a fixed to relative position. Despite what I'd changed in my stylesheet, I can't seem to make the navbar switch from a fixed to relative state.
Image of the issue:
http://i.gyazo.com/9e8ac2c12d279bba4e5ff98418c9b0ed.png
When normally on the page over 600px:
http://i.gyazo.com/b54486fb441717e79ed9bd3b44ba2710.png
Here's the code. As you can see, when set to resize under 600px, the position should stay relative, but it doesn't:
.main-navigation {
position: fixed;
float: left;
width: 100%;
display: block;
clear: both;
font-family: 'Open Sans', sans-serif;
background: url('nav-bg.png') repeat center;
color: #fff;
-webkit-box-shadow: 0 3px 6px 0px black;
-moz-box-shadow: 0 3px 6px 0px black;
box-shadow: 0 3px 6px 0px black;
z-index: 999999;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
float: left;
}
.main-navigation a {
display: block;
padding: 2.5em 3.5em;
font-size: 14px;
font-size: 1.4rem;
text-decoration: none;
line-height: 1.4em;
color: white;
color: hsl(0, 0%, 100%);
}
.main-navigation ul ul {
position: absolute;
left: 0;
z-index: 99999;
display: none;
float: left;
padding: 0;
background-image: url('nav-bg2.png');
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul ul li {}
.main-navigation li:hover > a {
color: #fff;
color: hsl(0, 0%, 100%);
background: #313131;
opacity: 0.4;
}
.main-navigation ul ul :hover > a {}
.main-navigation ul ul a:hover {
background: #313131;
background: hsl(0, 0%, 19%);
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation ul ul li:hover > ul {
display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover {
-moz-box-shadow: inset 0 0 15px #000000;
-webkit-box-shadow: inset 0 0 15px #000000;
box-shadow: inset 0 0 15px #000000;
color: #fff;
}
.main-navigation .current_page_ancestor {
-moz-box-shadow: inset 0 0 15px #000000;
-webkit-box-shadow: inset 0 0 15px #000000;
box-shadow: inset 0 0 15px #000000;
}
.main-navigation ul ul .current_page_parent,
.main-navigation .current_page_parent .current_page_item > a {
-moz-box-shadow: inset 0 0 15px #000000;
-webkit-box-shadow: inset 0 0 15px #000000;
box-shadow: inset 0 0 15px #000000;
}
/* Menu Resize */
.menu-toggle {
display: none;
}
#media screen and (max-width: 600px) {
.menu-toggle {
display: block;
height: 3.75em;
padding: 0 1em;
font-weight: normal;
font-size: 14px;
font-size: 1.4rem;
text-decoration: none;
line-height: 3.75em;
color: white;
background-image: url('nav-bg2.png');
position: relative;
}
.main-navigation.toggled .nav-menu {
display: block;
border-top: 1px solid;
border-top-color: #fff;
border-top-color: hsla(0, 0%, 100%, .5);
}
.main-navigation ul {
display: none;
text-align: center;
padding-left: 0;
background-image: url('nav-bg2.png');
}
.main-navigation li {
float: none;
}
.main-navigation li a {
padding: 1.3em 2em;
}
.main-navigation li li a {
padding-left: 4em;
}
.main-navigation li li li a {
padding-left: 6em;
}
.main-navigation li:hover > a {
background: #313131;
background: hsl(0, 0%, 19%);
}
.main-navigation ul ul,
.main-navigation ul ul ul {
position: relative;
top: inherit;
left: 0;
display: block;
float: none;
background-image: url('nav-bg2.png');
}
.main-navigation ul ul a { width: 100%; }
.main-navigation ul a:hover,
.main-navigation ul ul a:hover {
background: #4d4d4d;
background: hsl(0, 0%, 30%);
}
.main-navigation .current_page_ancestor { background: inherit; }
.main-navigation ul ul .current_page_parent {
color: inherit;
background: inherit;
}
.main-navigation .current_page_item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current_page_item li:hover,
.main-navigation .current_page_parent .current_page_item > a {
-moz-box-shadow: inset 0 0 15px #000000;
-webkit-box-shadow: inset 0 0 15px #000000;
box-shadow: inset 0 0 15px #000000;
}
}
You never set the position back to relative for .main-navigation - you do so for .menu-toggle (which I assume is your dropdown button?)
Try adding this:
#media screen and (max-width: 600px){
.main-navigation {
position: relative;
float: none;
}
}
I'm creating a submenu for my website but it needs some little fixes.
First, I can't make the z-index work, is displayed under the content div, in the live example I removed all z-index, and righ now, I really have no idea how this works :(
Second, in the submenu from second option, the box is more large than the first one. I'm trying to fix it but I don't see where the problem is.
/* Sub-menu */
#main-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#main-nav ul li {
float: none;
display: block;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .4);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#main-nav ul li:last-child {
box-shadow: none;
}
#main-nav ul a {
color: #fff;
background: #474747;
display: block;
white-space: nowrap;
}
#main-nav ul a:hover {
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
background-image: linear-gradient(-90deg, #cdcdcd, #797979);
}
#main-nav ul li:first-child a {
/* rounded corner */
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
#main-nav ul li:last-child a {
/* rounded corner */
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
}
#main-nav ul li:first-child a:after {
content:'';
position: absolute;
left: 30px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #fafafa;
}
#main-nav:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
Here's a live example: http://jsfiddle.net/y59kjsLn/1/
Thanks in advance!
Edit: add more css
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }
Chan this cause the z-index problem?
Edit2: Add the html code
Hmmm maybe has something to do with...
<div id="content">
<article class="post clearfix">
<?php
if(array_key_exists($matches[1], $includes)) {
$content = include($includes[$matches[1]]);
} else header("Location: /home");
?>
</article>
</div>
This is just behind the menu.
#content CSS code:
#content {
opacity: 0.8;
background: #fff;
margin: 30px 0 30px;
padding: 20px 35px;
width: 600px;
float: left;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#content .error {
color: red;
text-align: center;
}
#content .note {
font-size: 80%;
text-align: center;
}
#content p {
margin-top: 30px;
}
h2.post-title {
margin-top: 15px;
background: #888;
border-radius: 5px;
padding: 0px 5px ;
border-top: 1px solid #889;
border-bottom: 1px solid #889;
text-align: center;
}
h2.post-title a {
color: #FFFFFF;
font-size: 0.9em;
text-shadow: 1px 1px 2px #333333;
}
.post {
margin-bottom: 20px;
}
.post-title {
margin: 0 0 5px;
padding: 0;
font: bold 26px/120% Arial, Helvetica, sans-serif;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}
figure.post-imagen img {
float: left;
margin: 5px;
max-width: 260px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }
Js Fiddle
removed the margin which was affecting the sub menu
#main-nav li:first-child {
margin-left: 10px;
}
edit
Remove and Add
#content
opacity: 0.8; /* removed */
background: rgba(255, 255, 255, 0.55); /* added */
}
I have a CSS menu on this page: http://itos3test.notexa.be/itos3test/customer-service-oplossingen/. When you hover over "rol van het contact center" or "Bedrijfs doelstellingen" you can see that the submenu has 2 rows.
When I now hover over the third submenu ("Verkoop fondsenwerving" or "Klanten-Trouw verhogen") the fourth submenu jumps to the right, the gap between the first and second row becomes smaller and the items after the fourth display on a third row.
I tried searching for the css that is causing this with firebug, and as far as I can see the containers are all of the correct size. Maybe it inherits something, or I made a horrible mistake in the css, but I just can't see it.
The CSS code:
/* style main menu */
ul.shortcode_menu.solution-finder {
display: inline;
}
ul.shortcode_menu.solution-finder li {
list-style: none;
background: linear-gradient(#00A7FF 3.8%, #27027B) repeat scroll 0 0 #00A7FF;
border-radius: 2px;
float: left;
margin: 0 0 1em 1em;
padding: 0px;
text-align: center;
max-width: 150px;
width: 100%;
height: 80px;
}
ul.shortcode_menu.solution-finder li:hover {
background: linear-gradient(#54575A, #54575A) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-left: 1px solid rgba(106, 115, 123, 0.5);
border-radius: 2px 2px 0 0;
border-right: 1px solid rgba(106, 115, 123, 0.5);
border-top: 1px solid rgba(106, 115, 123, 0.5);
margin-bottom: 0;
}
ul.shortcode_menu.solution-finder li a {
max-width: 150px;
width: 99%;
height: 65px;
margin: 0px;
float: left;
text-align: center;
padding-top: 15px;
color: #FFFFFF;
font-size: 18px;
text-decoration: none;
text-shadow: 0 1px 2px #000000;
}
ul.shortcode_menu.solution-finder li:hover a {
opacity: 0.9;
color: #FFFFFF !important;
}
/* style sub menus */
ul.shortcode_menu.solution-finder li ul.sub-menu {
width: 600px;
}
ul.shortcode_menu.solution-finder li ul.sub-menu li {
display: inline-block !important;
list-style: none;
max-width: 150px;
width: 100%;
height: 80px;
border: 1px solid #DDD;
margin-top: 0.2em;
margin-right: 0.2em;
margin-left: 0;
text-align: center;
padding: 0px 0px;
font-size: 18px;
color: #FFFFFF;
text-shadow: 2px 2px 5px #EEE;
}
ul.shortcode_menu.solution-finder li ul.sub-menu li:hover {
color: #FFFFFF;
text-shadow: none;
}
ul.shortcode_menu.solution-finder li ul.sub-menu li a {
max-width: 150px;
width: 99%;
height: 65px;
/* background: linear-gradient(#00A7FF 3.8%, #27027B) repeat scroll 0 0 #00A7FF;*/
display: block;
}
ul.shortcode_menu.solution-finder li ul.sub-menu li:hover a {
/* opacity: 0.9;
background: linear-gradient(#54575A, #54575A) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-left: 1px solid rgba(106, 115, 123, 0.5);
border-radius: 2px 2px 0 0;
border-right: 1px solid rgba(106, 115, 123, 0.5);
border-top: 1px solid rgba(106, 115, 123, 0.5);
margin-bottom: 0;*/
}
Anybody got an idea ?
Found it: margin-bottom: 0 was the problem
I wasn't sure how else to title this but basically what is happening is the navbar seems to be leaving a ghost image of itself. It's fixed and functions otherwise perfectly but after scrolling down on a page, when I scroll back up, it leaves an image on the area of the page that I scrolled down to. The screenshot shows the problem, although I will mention the navbar is white so it's a poor example. When it has color it leaves a colored bar across the page.
I am totally new at web design in every way so please be descriptive when answering. Thanks!
MY BOOTSTRAP CSS:
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.navbar {
overflow: hidden;
margin-bottom: 0px;
color: transparent;
*position: relative;
*z-index: 2;
}
.navbar-inner {
min-height: 50px;
/* padding-left: 20px; */
padding-right: 20px;
background-color: #ffffff;
/* background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x; */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
border: 1px solid #ed4542;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);*/
}
.navbar .container {
width: auto;
}
.nav-collapse.collapse {
height: auto;
}
.navbar .brand {
float: left;
display: block;
padding: 20px 20px 20px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #555555;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .brand:hover {
text-decoration: none;
}
.navbar-text {
margin-bottom: 0;
line-height: 30px;
}
.navbar-link {
color: #ed4542;
}
.navbar-link:hover {
color: #ed4542;
}
.navbar-form {
margin-bottom: 0;
*zoom: 1;
}
.navbar-form:before,
.navbar-form:after {
display: table;
content: "";
line-height: 0;
}
.navbar-form:after {
clear: both;
}
.navbar-form:before,
.navbar-form:after {
display: table;
content: "";
line-height: 0;
}
.navbar-form:after {
clear: both;
}
.navbar-form input,
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
margin-top: 15px;
}
.navbar-form input,
.navbar-form select,
.navbar-form .btn {
display: inline-block;
margin-bottom: 0;
}
.navbar-form input[type="image"],
.navbar-form input[type="checkbox"],
.navbar-form input[type="radio"] {
margin-top: 3px;
}
.navbar-form .input-append,
.navbar-form .input-prepend {
margin-top: 6px;
white-space: nowrap;
}
.navbar-form .input-append input,
.navbar-form .input-prepend input {
margin-top: 0;
}
.navbar-static-top {
position: static;
width: 100%;
margin-bottom: 0;
}
.navbar-static-top .navbar-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner,
.navbar-static-top .navbar-inner {
border: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1200px;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
/* -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1); */
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar-fixed-bottom .navbar-inner {
/* -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1); */
}
.navbar .nav {
position: relative;
right: 0;
display: block;
float: right;
margin: 0;
}
.navbar .nav.pull-right {
float: right;
}
.navbar .nav > li {
float: left;
margin-top: 10px;
}
.navbar .nav > li > a {
float: none;
vertical-align: middle;
padding: 20px 10px 20px;
color: #555555;
font-family: 'Lora', serif;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: #transparent;
color: #7095eb;
text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #ed2b28;
text-decoration: none;
background-color: #transparent;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
Third section from the top has the overflow hidden, should be visible.
.navbar {
overflow: visible;
margin-bottom: 0px;
color: transparent;
*position: relative;
*z-index: 2;
}