Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Adding an image to the navbar

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #149048
    melanieladue
    Participant

    I’m having issues adding an image to the navbar menu. Here’s my css: What have I done wrong?

    http://tinkerbdesigns.com/TCBOTB/

    /* Secondary Navigation
    ———————————————————— */

    subnav {

    background-image: url(http://tinkerbdesigns.com/TCBOTB/wp-content/uploads/2013/09/navmenu.png);border-top: 1px dashed #07426e;
    border-bottom: 1px dashed #07426e;
    clear: both;
    color: #fff;
    font-family: "ALex Brush", Courier, monospace;
    overflow: hidden;
    text-transform: lowercase;
    width: 1200px;
    

    }

    subnav ul {

    float: left;
    padding: 0 0 0 5px;
    width: 955px;
    

    }

    subnav ul ul {

    padding: 0;
    width: 100%;
    

    }

    subnav li {

    float: left;
    list-style-type: none;
    

    }

    subnav li a {

    color: #07426e;
    display: block;
    font-size: 22px;
    margin: 0;
    padding: 5px 20px;
    position: relative;
    text-decoration: none;
    

    }

    subnav li a:hover,

    subnav li a:active,

    subnav .current_page_item a,

    subnav .current-cat a,

    subnav .current-menu-item a {

    color: #000;
    

    }

    subnav li a .sf-sub-indicator {

    display: block;
    height: 10px;
    overflow: hidden;
    position: absolute;
    right: 10px;
    text-indent: -9999px;
    top: 12px;
    width: 10px;
    

    }

    subnav li li a,

    subnav li li a:link,

    subnav li li a:visited {

    background-color: #fff;
    border: 1px solid #888;
    border-top-width: 0;
    color: #555;
    font-size: 12px;
    padding: 5px 10px;
    position: relative;
    text-transform: lowercase;
    width: 138px;
    

    }

    subnav li li a:hover,

    subnav li li a:active {

    color: #000;
    

    }

    subnav li ul {

    height: auto;
    left: -9999px;
    position: absolute;
    width: 160px;
    z-index: 9999;
    

    }

    subnav li ul a {

    width: 140px;
    

    }

    subnav li ul ul {

    margin: -33px 0 0 159px;
    

    }

    subnav li:hover ul,

    subnav li.sfHover ul {

    left: auto;
    

    }

    #149055
    Paulie_D
    Member

    A Codepen would be better but I’m not seeing that image being applied in your CSS stylesheet.

    I’m only seeing

    /* Secondary Navigation ———————————————————— */

    #subnav {
        background-color: #e3e3e3;
        border-top: 1px dashed #07426e;
        border-bottom: 1px dashed #07426e;
        clear: both;
        color: #fff;
        font-family: "ALex Brush", Courier, monospace;
        overflow: hidden;
        text-transform: lowercase;
        width: 1200px;
    }
    

    Oh…and you’ll probably need to add a height to that div too.

    #149057
    melanieladue
    Participant

    Sorry…was playing around…here is what it currently is…isn’t this where I put the image code?

    /* Secondary Navigation
    ———————————————————— */

    subnav {

    background-image: url(http://tinkerbdesigns.com/TCBOTB/wp-content/uploads/2013/09/navmenu.png);
    background-color: #e3e3e3;
    border-top: 1px dashed #07426e;
    border-bottom: 1px dashed #07426e;
    clear: both;
    color: #fff;
    font-family: "ALex Brush", Courier, monospace;
    overflow: hidden;
    text-transform: lowercase;
    width: 1200px;
    

    }

    #149059
    Paulie_D
    Member

    Add a height to the subnav and it will show up.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.