Resizing Menu Text Size and re-arranging

Hi,

I am wondering if someone can help please?

I am looking firstly to reduce the text size on the menu header.

Secondly, I would like to re-arrange it so rather than the writing all appearing on one line - it appears on two (centered).

I would like my main menu to appear similar to the way this website displays theirs (which will allow me to add more menu's without looking too cramped).

Any assistance would be much appreciated.

Thanks.

Pritesh

Could You post an url to your site?

Hi,

The website is: www.hasled.com

Thanks

Right now menu font size is 11px - are You sure You would like to make it smaller? It will be difficult to read smaller font.

Hi,

Thanks for your message. I think that you might be right about keeping it size 11px. Is there any way that I can have the writing on two lines to save space i.e. at the moment "Customisable Headphones" is appearing side by side - Is there any way that I can have it so 'Customisable' appears on top and 'Headphones' appears directly beneath it (keeping them both centered)?

Many thanks.

Pritesh

Hi,

Can anyone help?

Many thanks.

Pritesh

I have tested few solutions, but all doesnt look right. This template is just not prepared to display menu items in two lines

The best look I could achieve is with this css code:

Code: Select all

div.gk-menu > ul.level0 > li {
    max-width: 150px;
}
div.gk-menu > ul > li > a > span {
    line-height: 16px;
    text-align: center;
    height: 39px;
}
div.gk-menu > ul > li > a {
     padding-top: 4px;
     height: 39px;
}


Please read first about adding custom CSS:
http://www.gavick.com/documentation/joo ... -template/

Hi,

Thanks for your message.

I made the changes that you suggested, but this didn't seem to make any changes on my website.

I enabled the 'CSS Override' in the templates section (Advanced Settings) and also added the code that you provided to the 'Custom CSS Code' section.

I have attached a picture of what my website currently looks like (see top picture in attachment) and the bottom picture is similar to what I am trying to achieve.

Can anyone help?

Many thanks,

Pritesh

Your image didn't attached.

Sorry - I can't seem to attach - I have uploaded it to another website. Hopefully this link will work:

http://postimg.org/image/lf6tfe19v/

The changes didn't save to override.css - please check that file on your ftp server and add presented code to it. Result is almost the way You would like it to be.

Hi,

Thanks for your message. I think I am doing something wrong, but not too sure what. I have added the code to the override.css files and deleted it from the 'Custom CSS Code'.

I cannot still get it to work.

Any ideas?

Many thanks,

Prit

Strange, your override.css looks this way:

Code: Select all

/*

#------------------------------------------------------------------------

# yourshop.com - June 2011 (for Joomla 1.6)

#

# Copyright (C) 2007-2011 Gavick.com. All Rights Reserved.

# License: Copyrighted Commercial Software

# Website: http://www.gavick.com

# Support: [email protected]

*/

.productdetails-view h1 {
font-size: 190%;
}

.browse-view .row .product .spacer h2 {
    font-size: 15px;
}

.product-related-products .product-field {
width:170px;
}

/* Here you can include your override CSS styles */


You can access it here:
http://www.hasled.com/templates/gk_your ... erride.css

Ps - perhaps the problem is, that You are editing override.css in not active template?

Hi,

Sorry for the late reply - that worked great. Just on the back of that - Some of the menus are only one line - after making the changes - they seem to be top aligned (please see www.hasled.com for example). Is there any way to keep the changes, but vertically align?

Thanks

Prit

There is a way, one that I dont like to use, but it seems the only way:

Code: Select all

div.gk-menu > ul.level0 > li > a {display: table; height: 38px; line-height: 38px;}
div.gk-menu > ul.level0 > li > a > span {display: table-cell; text-align: center; vertical-align: middle;}