1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Wordpress menu css help

Discussion in 'CSS' started by caligrafx, Sep 30, 2014.

  1. #1
    I have a css class of .red for just one tab in my menu but can't figure out how to get it red without changing the whole menu. I am just wanting the dealer's lab to be red background only. Any help would be great!

    http://www.frankenstand.com/
    SEMrush
    Thanks,
    Adam
     
    caligrafx, Sep 30, 2014 IP
    SEMrush
  2. SkyDevel Labs

    SkyDevel Labs Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #2
    can you post a snippet of the code for both the css and html? that would a great help
     
    SkyDevel Labs, Sep 30, 2014 IP
  3. caligrafx

    caligrafx Active Member

    Messages:
    137
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    83
    #3
    Yeah... lol sorry!

    #nav.creative { margin:24px 0 0; }
    #nav.creative ul { list-style:none; }
    #nav.creative li { float:left; position:relative; }
    #nav.creative li a { display:block; padding:6px 15px; background:#dddada; color:#08131c; font-family:Verdana; font-size:12px; margin-right:3px; line-height:15px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; border-top-left-radius:3px; border-top-right-radius:3px; } 
    #nav.creative li.current-menu-item a { background:#fff; }
    #nav.creative li:hover a, #nav.creative ul.sub-menu, #nav.creative ul.children { background:#c3c1c1; }
    Code (CSS):
    <div id="nav" class="group creative">
                                <ul id="menu-main-menu" class="level-1"><li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16"><a href="http://www.frankenstand.com/">Home</a></li>
    <li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232"><a href="http://www.frankenstand.com/products/">Products</a></li>
    <li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="http://www.frankenstand.com/locatedealer/">Locate Dealer</a></li>
    <li id="menu-item-237" class="red menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a href="http://www.frankenstand.com/dealers/">Dealer&#8217;s Lab</a></li>
    <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://www.frankenstand.com/how-it-works/">How It Works</a></li>
    <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://www.frankenstand.com/faq/">Faq</a></li>
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://www.frankenstand.com/testimonials/">Testimonials</a></li>
    <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://www.frankenstand.com/dj-articles/">DJ Articles</a></li>
    <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://www.frankenstand.com/warranty/">Warranty</a></li>
    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="http://www.frankenstand.com/contact-us/">Contact Us</a></li>
    </ul>   
                            </div>
    
    HTML:
     
    caligrafx, Oct 1, 2014 IP
  4. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #4
    If you only want one tab red, then give it an id="redtab" and in the css add

    #redtab {color:red;}

    Or if it already has an id just add the color to the rule.

    That is what id declarations are for, and you don't break the cascade with a lot of over-complex nonsense.
     
    COBOLdinosaur, Oct 1, 2014 IP