Topic: Main menu size/height issues

Hi,

Just installed Arras and think it is fab.

I am having trouble with the main menu, I would like to change the font size to 15px and have successfully done that.

However, I cannot get the height correct.

my css in the user.css file is:

#nav .sf-menu  { font-size: 15px; text-transform: capitalize; }
#nav .sf-menu a  { font-size: 15px; text-transform: capitalize; }
#nav .sf-menu li li a { font-size: 15px; text-transform: capitalize;}

to increase the height I have included:

#nav {height: 40px}

This now increases the height but background has not changed. (see pic)

What do I need to do to adjust the background to reflect the height changes? So that the colours are not strange.

If I increase the font and not the height then the border of each menu item is higher that the menu.

Thanks!

Thumbs up

Re: Main menu size/height issues

Please, provide a link to your site?

Thumbs up

Re: Main menu size/height issues

voidtrance wrote:

Please, provide a link to your site?

www.foodtravelbliss.com

thanks smile

Thumbs up

Re: Main menu size/height issues

foodtravelbliss wrote:
voidtrance wrote:

Please, provide a link to your site?

www.foodtravelbliss.com

thanks smile

The background is provided by an actual image. There is no way to resize the image through the "background" css property. You can add the following to your user.css:

#nav { background-size: auto 40px; }

Be advised, the image that provides the backgound is not entirely composed of that dark grey color - it's half-and-half - so when you resize it, only the bottom half of the nav bar will be dark grey. To make the entire nav bar dark grey use

#nav {background: #CCC;}

Thumbs up

Re: Main menu size/height issues

Ah I see - great thanks for your help smile

Thumbs up