I need to change the background color of "home" tab only

Hi All,

I need to change the Background color of just "Home" tab in the main menu bar of my site. I am using the "menu" option in the wordpress to create a customized menu. I am not using the regular menu which is formed out of categories. I can only change the background color of all the tabs.

I just need to change the background color of the "Home" tab and not the other tabs in the menu.

Check the attachment below to see the page of my website. See the navigation menu on the top. I just want to change the color of "Home" tab and keep rest tabs blue.

How do i do it? This is very urgent guys help me plz!

 

In Wordpress, go to your Menu manager, and assign a class to the Home tab.

Next, go to your CSS and make something like this:

.tabclass {
background: color;
}

Done and dusted

 

Thanks for the reply Cone Man.

I know this sounds really dumb, but how do i create a a class for the home tab separately? Can you kind of give an example.

 

Go to wp-admin/nav-menus.php, click "Screen Options" at the top right of the page, and check the box labelled "CSS Classes".

Then, simply expand your Home tab, and you'll see a new box labelled "CSS Classes (optional)". You can put your class in there Hope this helps!

 

I got your css classes optional thing. But unable to get things in css file right as the result isn't coming up :-(

 

Refresh with CTRL F5 It will clear the cache.

 

Bro, unable to do it. I tried everything i know. Can you please helppppp! Have to complete this task today and show it to my bosss :-(

 

Send me the link dude

 

Please copy the following into dummy Wordpress page

" <!-- Heading -->
<div style="position: absolute; left: 432px; top: 0px; margin-top: -50px; z-index: 10;">

&nbsp;
<table style="border: 1px solid #000000; margin: 0px auto; width: 1040px; background-color: #000000;" ><colgroup> <col style="width: 100%;" /> </colgroup>
<tbody>
<tr>
<td height="150">
<h1 style="text-align: center; font-size: 30pt;"><span style="color: #ffffff;"><strong>You can build a website like this for free</strong></span></h1>
</td>
</tr>
</tbody>
</table>
</div>

<!-- Video 2 -->
<div style="position: absolute; left: 432px; top: 165px; margin-top: 0px; z-index: 8;">
<table style=" border: 1px solid #000000; margin: 0px auto; width: 1040px; background-color: #000000;" ><colgroup> <col style="width: 33%;" /> <col style="width: 34%;" /> <col style="width: 33%;" /> </colgroup>
<tbody>
<tr>
<td>
<h1 style="text-align: center; font-size: 16pt;"><span style="color: #ffffff;"><strong>With Eye Catching
Features like this</strong></span></h1>
</td>
<td><iframe style="border: 0px solid #111111;" src="//www.youtube.com/embed/rlpJOE5KK0Q?modestbranding=1&amp;title=;rel=0&amp;wmode=transparent&amp;autoplay=1;amp;hd=1; autohide =1;controls=0;loop=1&amp;playlist=rlpJOE5KK0Q" height="315" width="420" allowfullscreen="" frameborder="0"></iframe></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!-- Border -->
<div style="position: absolute; left: 425px; top: 600px; margin-top: 0px; z-index: 7;">

&nbsp;
<table style=" border: 1px solid #000000; margin: 0px auto; width: 1040px; background-color: #000000;"><colgroup> <col style="width: 100%;" /> </colgroup>
<tbody>
<tr>
<td height="50">
<h3 style="text-align: center; font-size: 16pt;"><span style="color: #ffffff;"><strong>Sign Up Below</strong></span></h3>
</td>
</tr>
</tbody>
</table>
</div>"

It looks complicated but it is not really.
The code creates 3 div boxes and puts them in certain spots e.g. 425px left 600 px down
You can control the table background colour easily.
Let me know if this helps.

 

Just create the class for <li> and give that class only and only to <li>. May this this help you.

 

coneman,,,,,,,send the link in PM to you!