How to Edit Top Menu Heading ?

This is it! You can change any of the values in this set of attributes in the style.css file of your child theme to make your changes.

.top-menu li a {
    border-left: 1px solid #CCCCCC;
    color: #333333;
    font-size: 11px;
    padding: 0 4px 0 8px;
}

Thanks , that’s the exact location as you mentioned. However the problem is I am not getting the effect that I want. I put in this code as below , please help me to modify it to get my desired result. I want to have like a colored outset so that it would stand out , the below code doesn’t seem to work. You can check my website out at https://www.wheelnmotor.com , Thanks again.

.top-menu li a {
  border-left: 3px solid #CCCCCC;
  span style=border-style:outset;border-color:#ffff00;border-width:3px;
    color: #ffffff;
    font-size: 15px;
    padding: 0 15px 0 15px;
}

span style=border-style:outset;border-color:#ffff00;border-width:3px;
This is code that would go in your layout code, not your css file. You should remove this completely.

If you want to change the font colour and size, you just have to change the following:

.top-menu li a {
    border-left: 1px solid #CCCCCC;
    color: blue;
    font-size: 16px;
    padding: 0 4px 0 8px;
}

See, my changes above would make the text blue and 16px large. That’s not necessarily the result you want, I know. But you can change the values to whatever you want, you just have to alter the color and font-size values individually.

I’m not sure what you mean by ‘colored outset’ though. Could you describe a little more the effect you’re going for?

Ok I removed that code since I wasn’t getting any effect on the text anyways.

If you go to my website https://www.wheelnmotor.com and see the top header , the problem is the background picture. It is both light and dark , light because of the mountains and dark because of the trees. So no matter what color I put on the text , part of the text can not be seen clearly.

So I want some kind of box or shade behind the text so that the text will be seen clearly behind the color of the box/shade as it will be irrespective of my back ground image. I hope you understood my problem.

Is there a solution for this as I do not want to change the back ground header image ?

Thanks for all your help ??

Oh, sure. I’m on an ipad, not at a computer I can use firefox and firebug right now, so I can’t give you the specific css — but you can create that effect by giving a background colour to .top-menu ul

Hi,

I am not able to find this .top-menu ul in my style.css ,
Can you please tell me where is it and what is the code that I should use. Thanks.

Sure. If that selector doesn’t already exist explicitly in the css, you can just create it.

`.top-menu ul {
background: blue;
}

(where you change ‘blue’ to the colour you actually want)

Hi ,

I put the code as you mentioned but nothing happened. No color changed on that location. I tried with the hex code as well. Please see my site. I do have a background image and maybe that’s hiding it.

Ok so I managed to make about us , Contact us and advertise bolder on my site https://www.wheelnmotor.com , however I can’t see advertise clearly now still. Can you please just give me a code to push these 3 headers a little bit on top to the lighter background. I’m sure that will be enough , I wouldn’t need to add any backgrounds to the text.

Ok it wasn’t working. So I moved it to the bottom of my page.