Grow your CSS skills. Land your dream job.

Navigation menu box shadow confusion

  • # April 24, 2013 at 12:17 pm

    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:

    < !DOCTYPE html>


    # April 24, 2013 at 1:21 pm

    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.

    # April 24, 2013 at 2:19 pm

    Any simple js solution?

    # April 24, 2013 at 3:10 pm

    > I can’t seem to get the active hover state to keep the background.

    Don’t quite understand what you are trying to achieve. I know a simple js solution that adds an active class on click or even hover, but I’m not even sure if that’s what you are trying to achieve.

    # April 24, 2013 at 4:47 pm

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

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

    # April 24, 2013 at 6:16 pm

    Try this:

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

    # April 24, 2013 at 6:25 pm

    @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”)

    # April 25, 2013 at 1:25 am

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

    That’s a regular dropdown menu with a fade in fade out effect applied, via css or js.

    It’s still unclear (to me, mind you – I’m not trying to be an ass, just trying to understand your question, and English isn’t even my first language so I might have understanding issues) what’s being asked in the OP.

    I am referring to this sentence

    > I can’t seem to get the active hover state to keep the background.

    Do you want the active state to retain the background even when hovered?

    # April 25, 2013 at 9:46 am

    @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.

    # April 25, 2013 at 11:50 am

    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.

    # April 25, 2013 at 12:09 pm

    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.

    < ?php
    $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.

  • “>
  • Obviously, you change the pageSection string to correlate with the page you are on.

    It does require you put the header section with navBar in it’s own page, something like header.php, and then include that page on each new page you want. It saves copying and pasting a tonne of code.

    This way, it will apply classes to elements only when that page is loaded, ideal for underlining or applying styles to elements in nav bars etc.

    I’m ok with jQuery but was taught to stay away from things that require fallbacks as much as possible. Make a site that will work under all circumstances and then add onto that.

    I don’t know if this is the correct way or preferred way but I find PHP saves a tonne of time and code.

# April 25, 2013 at 12:13 pm

>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.

# April 25, 2013 at 12:16 pm

@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.

# April 25, 2013 at 12:20 pm

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.

# April 25, 2013 at 12:26 pm

@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.

Viewing 15 posts - 1 through 15 (of 29 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".