Navigation menu box shadow confusion

[simpletwist]

For practice I’m trying to replicate this somewhat simple navigation bar: http://www.joeledbetter.com/contact/

I can’t seem to get the active hover state to keep the background. Any thoughts on where going wrong or if I need to be more particular with my declarations?

body {
background-color: rgb(228, 228, 228);
color: rgb(136, 136, 136);
font: 1em “Arial Black”, Gadget, sans-serif;
padding: 40px;
}

.header-container {
display: block;
width: 100%;
height: 145px;
}

#header {
position: relative;
width: 90%;
padding: 0 5%;
height: 145px;
background-color: #f5f5f5;
z-index: 999;
}

.content {
margin:0 auto;
width: 960px;
color: #111111;
}

/* /////////////////////////////////////////////////////////////////////
// 02 – COLORS
/////////////////////////////////////////////////////////////////////
.yellow { color: #fdd94b;}
.blue { color: #129d35;}
.purple { color: #90C0DE}
.orange { color: #1E323A;}
.green { color: # A1D101;}
.ltgrey { color: # f2f2f2;}

*/

/* /////////////////////////////////////////////////////////////////////
// NAVIGATION
/////////////////////////////////////////////////////////////////////*/

nav {
background-color: #f8f8f8;
text-transform:uppercase;
width: 100%;
height: 76px;
float: right;
padding: 1px 0 2px;
margin: 0 auto;
margin-top: 60px;
text-align: right;
}

nav a {
text-decoration: none;
color: #333;
padding: 5px 0;
font-family:sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
background: transparent;
}

nav ul.main-nav {
list-style-type:none;
padding:0;
margin:0 auto;
width: 960px;
height: 57px;
text-align:center;
}

.main-nav li {
display: inline;
position: relative;
margin-left: 25px;
padding: 15px 0 10px;
}

nav ul.main-nav > li {
float:left;
width: 150px;

}

nav ul.main-nav > li a {
width: 160px;
height: 67px;
}

nav ul.main-nav > li > a:hover {
color: #999;

}

nav ul.main-nav > li > a:active {
background: #fff;
-webkit-box-shadow: 5px 5px 0 0 rgba(0,0,0,.1);
box-shadow: 5px 5px 0 0 rgba(0,0,0,.1);
border:2px solid #e3e3e3;
padding: 25px;
z-index: -99999px;
}

/*
.main-nav>ul>li, .nav-menu>ul>li.current-menu-ancestor {
background-color: #fff;
}

*/

.nav-name {
display:block;
font-size: 1.2em;

}

.nav.desc {
margin-left: 15px;
color:#ccc;

}

/* sub nav */

nav ul.main-nav li ul.subnav {
position:absolute;
top: 58px;
background-color: #575757;
padding 5px 10px;
width: 250px;
left: -9999px;
}

nav ul.main-nav li ul.subnav li {
list-style-postion:inside;
list-style: none;
padding: 0.8em 0;

}

nav ul.main-nav li ul.subnav li a {
color: #fff;
}

nav ul.main-nav li ul.subnav li a:hover {
color: #ccc;
}

nav ul.main-nan > li:hover ul.subnav {
left:0;
}

/*

.nav-menu>ul>li.current-menu-item, .nav-menu>ul>li.current-menu-ancestor {
background-color: #fff;
padding-left: 15px;
padding-right: 15px;
-webkit-box-shadow: 5px 5px 0 0 rgba(0, 0, 0, .1);
box-shadow: 5px 5px 0 0 rgba(0, 0, 0, .1);
}
.nav-menu a {
font-size: 18px;
text-decoration: none;
color: #333;
padding: 5px 0;
font-family: ‘DIN Next W01 Bold’;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 2px;
}
.nav-menu a:hover {
color: #999;
}
*/

HTML markup:

• art
  
• archive

  
  

• about

• blog

  
  

• contact

Title of example nav

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis hendrerit augue. Nulla eu mauris at ante semper malesuada. Donec mattis, purus sit amet pretium semper, tellus dolor adipiscing mauris, quis consequat turpis justo eu arcu. Fusce eu luctus libero. Suspendisse porta sapien at nunc condimentum feugiat. Vivamus et elit nec mi posuere iaculis. Curabitur auctor orci non elit lobortis eget varius elit rhoncus.

Proin mattis, lorem quis volutpat laoreet, elit tellus accumsan metus, in egestas mi nunc eget est. Morbi lobortis adipiscing luctus. Suspendisse quis est eu leo luctus venenatis egestas et magna. Mauris feugiat augue ac lectus vehicula faucibus tincidunt diam semper. Maecenas ac ultrices massa. Donec ipsum quam, consectetur eget consequat commodo, dapibus vitae odio. Ut eleifend, quam sit amet accumsan lacinia, lacus urna euismod velit, quis pharetra ipsum lacus in augue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis hendrerit augue. Nulla eu mauris at ante semper malesuada. Donec mattis, purus sit amet pretium semper, tellus dolor adipiscing mauris, quis consequat turpis justo eu arcu. Fusce eu luctus libero. Suspendisse porta sapien at nunc condimentum feugiat. Vivamus et elit nec mi posuere iaculis. Curabitur auctor orci non elit lobortis eget varius elit rhoncus.

Proin mattis, lorem quis volutpat laoreet, elit tellus accumsan metus, in egestas mi nunc eget est. Morbi lobortis adipiscing luctus. Suspendisse quis est eu leo luctus venenatis egestas et magna. Mauris feugiat augue ac lectus vehicula faucibus tincidunt diam semper. Maecenas ac ultrices massa. Donec ipsum quam, consectetur eget consequat commodo, dapibus vitae odio. Ut eleifend, quam sit amet accumsan lacinia, lacus urna euismod velit, quis pharetra ipsum lacus in augue.

*what is placed in the a tags?

[Paulie_D]

The active state only applies when the menu item has a mouse click down on it. As soon as the button is unclicked it comes off.

To have an active class applied you would need javascript.

[simpletwist]

Any simple js solution?

[Paulie_D]

I think this is another “How do I show which page I’m on in the menu” thread.

https://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/

[jurotek]

Try this:

.nav-menu>ul>li.current-menu-item,
.nav-menu>ul>li.current-menu-item:hover {
your styles
}

[simpletwist]

@krish1980
I’m trying to mimic the nav menu url below.

@jurotek
I think my styles are off, that is adding a white box that is vertically placed over the menu item. Any ideas on how to dial it in so it looks like the above example.

[Example nav menu](http://www.joeledbetter.com “Goal of nav”)

[simpletwist]

@Krish1980 If you were to execute the current code, you would notice that the active state has a white background and drop shadow that the text sits on. I’m looking just to copy the above example and simplify the code.

[Paulie_D]

Why don’t you build something in Codepen and let us tinker with it rather than just point us at an example.

TBH I think you have misunderstood the ‘active’ state.

[Th3M8dH8tt3r]

So you want the menu item to have a background with the drop shadow/second background when the user is on the corresponding page?

Use PHP. Something like this. Using index.php as the example page.

$pageSection = “home”;
include(‘header.php’);
?>

at the top of the HTML page and then make a class called .underline for this example.

Include this for your li items.

[Paulie_D]

>So you want the menu item to have a background with the drop shadow/second background when the user is on the corresponding page?

It’s a reasonable assumption but I’m not entirely sure as he’s not quite explaining himself very well.

[Th3M8dH8tt3r]

@Paulie_D – Just going by he wants to replicate the navBar to every page with active page items, it’s how I do it. All my page start and end with include for header and footer. Saves a tonne of space on the page.

[Paulie_D]

Oh I get it but the use of the term ‘active’ is causing confusion.

Obviously `:active` is a specific property in CSS and relates to the mouse-down state.

What we both think he’s after is a ‘current-page’ class which you have addressed in PHP/WP but as he hasn’t (AFAIK) stated that’s what he’s actually using it’s hard to come up with an ideal solution.

[Th3M8dH8tt3r]

@Paulie_D – yup! lol. If he wants to replicate the navBar, I think that’s how it should be done but I’m hardly a fountain of knowledge or got years of experience.

[simpletwist]

That is it, replicate nav.

goal[goal](https://www.dropbox.com/s/1kz1pdu56l1eu63/Screen%20Shot%202013-04-25%20at%2012.35.28%20PM.png “goal”)

attempt:[attempt](https://www.dropbox.com/s/3xqv3w7qqghb5tn/Screen%20Shot%202013-04-25%20at%2012.39.15%20PM.png “goal”)

[Paulie_D]

@simpletwist

Look we understand that you want to replicate the menu but you still haven’t explained yourself properly.

Is it the style of the hover you can’t do?

Is this supposed to be the look on mouse-down? [Which is ‘active’]

Or is it that you want the individual link to look like that **only** when the user is on that page?

Pictures don’t help that much. Please put some HTML & CSS in Codepen so we can help you better.

[Author]

Posts