ThemeShaper Forums » ThemeShaper WordPress Themes

Need a little help with image navbar!

(3 posts)
  • Started 10 years ago by waseem
  • Latest reply from de
  • This topic is resolved
  1. Hey,
    So I need help to find out why my image nav isn't working properly. The background images don't display and it maintains it's original state and hover effects. It's like my childtheme css isn't overwriting the thematic one. Anyways here is my custom menu in my functions.php

    function childtheme_menu() { ?>
    
    <div id="menu">
        <ul>
    	<li><a class="aboutbtn" href="<?php echo get_option('home') ?>/about/"><span>About</span></a></li>
    
    	<li><a class="teambtn" href="<?php echo get_option('home') ?>/team/"><span>Team</span></a></li>
    
    	<li><a class="plansbtn" href="<?php echo get_option('home') ?>/plans/"><span>Plans</span></a></li>
    
    	<li><a class="newsbtn" href="<?php echo get_option('home') ?>/blog/"><span>News</span></a></li>
    
    	<li><a class="donatebtn" href="<?php echo get_option('home') ?>/donate/"><span>Donate</span></a></li>
    
    	<li><a class="contactbtn" href="<?php echo get_option('home') ?>/contact/"><span>Contact</span></a></li>
        </ul>
    </div>
    
    <?php }
    
    add_filter( 'sandbox_menu', 'childtheme_menu' );

    And here is the styling in the css

    /* =Menu
    -------------------------------------------------------------- */
    #access{ position: absolute; top: 100px; right: 0; width: 600px; height: 40px; }
    
    #menu {
        display: block;
        width: 672px;
        float: right;
        background: #fff;
    }
    
    #menu li {
        list-style: none;
        display: inline;
    }
    
    #menu li a {
        margin: 2px 4px;
        padding: 0;
        display: block;
        float: right;
    }
    
    #menu a span {
        position: relative;
        display: block;
        z-index: -1;
    }
    /* /////////////////button styling///////////////////////////// */
    li .aboutbtn {
        background: url(images/aboutbtn.png) 0 0 no-repeat;
        display: block;
        width: 109px;
        height: 20px;
        outline: none;
    }
    
    li .teambtn {
        background: url(images/teambtn.png) 0 0 no-repeat;
        display: block;
        width: 109px;
        height: 20px;
        outline: none;
    }
    li .plansbtn {
        background: url(images/plansbtn.png) 0 0 no-repeat;
        display: block;
        width: 109px;
        height: 20px;
        outline: none;
    }
    li .newsbtn {
        background: url(images/newsbtn.png) 0 0 no-repeat;
        display: block;
        width: 109px;
        height: 20px;
        outline: none;
    }
    li .donatebtn {
        background: url(images/donatebtn.png) 0 0 no-repeat;
        display: block;
        width: 109px;
        height: 20px;
        outline: none;
    }
    li .contactbtn {
        background: url(images/contactbtn.png) 0 0 no-repeat;
        display: block;
        width: 109px;
        height: 20px;
        outline: none;
    }
    
    li .aboutbtn:hover, li .teambtn:hover, li .plansbtn:hover, li .newsbtn:hover , li .donatebtn:hover, li .contactbtn:hover {
        background-position: 0 -20px;
    }

    Can anyone help me figure this out.

    Posted 10 years ago #
  2. You need to specify the anchor, #menu li a {}, and apply your styling there.

    Posted 10 years ago #
  3. I am also trying to use images instead of the page name for navigation, where would be a good place to start as a "how to"?

    Posted 10 years ago #

RSS feed for this topic

Reply

You must log in to post.