Want to change the font size & colour of my Nav bar but haven't got the foggiest

[trendytots]

Hi there, new to this forum so please bear with me. I want to change the font size and colour of my nav bar but in the CSS code there isn’t any mention of the size or colour. I have copied what is in the CSS code for the Nav bar and if anybody can tell me what to do that would be great! Thanks in advance

/** ========== TOP NAVIGATION ========== **/

topNav {

margin: 0 auto 0px;
padding: 0px 0 0 0;
min-height: 32px;
width: 980px;
background: top left repeat-x;
background-image: url(‘/v/vspfiles/assets/images/navbar2.jpg’);
text-align: center;
}

display_menu_1 {

margin: 0;
padding: 0;
width: auto;
}

display_menu_1 ul {

width: auto;
margin: 0;
padding: 0;
list-style: none;
text-align: center;

[seanjacob]

Use font-size: and background: to adjust.

Chrome and Safari have inbuilt web inspectors so you can see where the font-size and background is coming from. To use this – right click on the nav and go to ‘Inspect element’.

[Paulie_D]

In any case, if you provide us with a link to the site we could help further.

Not sure there is much you can do about the background color as this:

background-image: url(‘/v/vspfiles/assets/images/navbar2.jp

suggests that, in fact, it’s an image.

[npav]

Like @Paulie_D said, looks like the BG is an image, if you have the image psd file you can edit that, then save it to your site folder with the same name as the current BG image.

[trendytots]

Sorry my post must not have been clear I want to change the font size and the font colour of the text on my nav bar. The image is just a stripe that I have placed behind the text. Thanks for your replies

[Paulie_D]

Still need a link….!

[ChrisP]

without seeing your code, I’m guessing:

display_menu_1  ul a {
    font-size: whatever-size-you-want;
    color: whatever-color-you-want;
}

not sure if that display_menu_1 is supposed to be a class or ID though.

[trendytots]

Paulie_D I don’t have a URL yet as I am on a free trial. The is the link to storefront http://v1460892.zxe3g7ph9guz.demo7.volusion.com/default.asp

seanjacob I have used the Inspect Element link and was able to change the colour and font size to what I wanted but couldn’t seem to save it? Thanks

[Paulie_D]

If you have access to the CSS you can edit the properties in’Navigation.css’

Frankly, I suspect that you may not….but I’m not familiar with Volusion

[trendytots]

I have the access to a CSS form but what is available under the Navigation header I copied and pasted above, which doesn’t mention font size or font colour. When I use that Inspect the Element that SeanJacob mentioned I am able to change it there but can’t seem to save it. thank you for your responses.

[Paulie_D]

#topNav ul li a {
display: inline-block;
padding: 7px 15px;
font-size: 13px; <===
text-transform: uppercase;
font-weight: 600;
color: #696969; <====
text-shadow: 1px 1px 0 #fff;
height: 17px;
}

Line 6

[Paulie_D]

…and

#display_menu_1 .nav a {
color: #696969;
}

Line 84

[trendytots]

Thanks for that Paulie_D but unfortunately it didn’t work. The only thing that worked is that Inspect the Element but I can’t save it. Thanks for your help

[Paulie_D]

The inspect element tells you which lines of CSS affect what you are inspecting.

Just keep looking and change the css file on the site accordingly.

[Author]

Posts