Resizing Menu Text Size and re-arranging

Change your online store into modern look with myStore eCommerce VirtueMart Joomla template - discussion forum.
GK User
Thu Jul 11, 2013 3:12 pm
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
User avatar
Gold Boarder

GK User
Thu Jul 11, 2013 3:25 pm
Could You post an url to your site?
User avatar
Moderator

GK User
Thu Jul 11, 2013 3:25 pm
Hi,

The website is: www.hasled.com

Thanks
User avatar
Gold Boarder

GK User
Thu Jul 11, 2013 4:13 pm
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.
User avatar
Moderator

GK User
Thu Jul 11, 2013 4:16 pm
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
User avatar
Gold Boarder

GK User
Fri Jul 12, 2013 12:50 pm
Hi,

Can anyone help?

Many thanks.

Pritesh
User avatar
Gold Boarder

GK User
Sat Jul 13, 2013 12:41 pm
I have tested few solutions, but all doesnt look right. This template is just not prepared to display menu items in two lines :(
User avatar
Moderator

GK User
Sat Jul 13, 2013 12:49 pm
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/
User avatar
Moderator

GK User
Mon Jul 15, 2013 10:28 pm
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
User avatar
Gold Boarder

GK User
Mon Jul 15, 2013 10:29 pm
Your image didn't attached.
User avatar
Moderator

GK User
Mon Jul 15, 2013 10:34 pm
Sorry - I can't seem to attach - I have uploaded it to another website. Hopefully this link will work:

http://postimg.org/image/lf6tfe19v/
User avatar
Gold Boarder

GK User
Tue Jul 16, 2013 9:49 pm
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.
User avatar
Moderator

GK User
Tue Jul 16, 2013 10:50 pm
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
User avatar
Gold Boarder

GK User
Thu Jul 18, 2013 5:29 pm
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
User avatar
Moderator

GK User
Thu Jul 18, 2013 5:30 pm
Ps - perhaps the problem is, that You are editing override.css in not active template?
User avatar
Moderator

GK User
Fri Sep 06, 2013 11:11 am
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
User avatar
Gold Boarder

GK User
Mon Sep 09, 2013 10:28 pm
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;}
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.