Wordpress menu css help

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

0
  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/

    Thanks,
    Adam
     
    caligrafx, Sep 30, 2014 IP
  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