Post by PartsPlusPerformance » Mon Dec 03, 2012 9:36 am

Untitled.png

Untitled.png (24.05 KiB) Viewed 2108 times

Hello,

I need some help on editing the template we have on http://www.partsplusperformance.com as you can see i would like all the categories appear in one single line and not move to form two lines in the navigation section, ( i have also attached a picture to help you out).

So if i could get some help or someone could tell me what files to edit, it would be appreciated!
Untitled.png

Untitled.png (24.05 KiB) Viewed 2108 times

Thanks

Beau Clarke | Parts Plus Performance


Posts

Joined
Mon Dec 03, 2012 9:31 am

Post by PartsPlusPerformance » Mon Dec 10, 2012 10:52 pm

Any help would be appreicated!.


Posts

Joined
Mon Dec 03, 2012 9:31 am

Post by labeshops » Mon Dec 10, 2012 11:05 pm

Edit the menu section in your stylesheet.css. You will need to play with padding, font size, etc. to get it all to fit as you want.

Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by PartsPlusPerformance » Fri Dec 21, 2012 9:32 pm

labeshops wrote:Edit the menu section in your stylesheet.css. You will need to play with padding, font size, etc. to get it all to fit as you want.
I can't seem to find the Menu section in my stylesheet? I've gone threw it a dozen times :(.

?????


Posts

Joined
Mon Dec 03, 2012 9:31 am

Post by mcamca » Fri Dec 21, 2012 11:19 pm

PartsPlusPerformance wrote:
labeshops wrote:Edit the menu section in your stylesheet.css. You will need to play with padding, font size, etc. to get it all to fit as you want.
I can't seem to find the Menu section in my stylesheet? I've gone threw it a dozen times :(.

?????
Your stylesheet is located at:
catalog/view/theme/theme051/stylesheet/stylesheet.css
The part of your stylesheet that controls the menu is as follows:

/**********************************************************************************************menu********************************************************************/
.menu-bg {
position:relative;
top:124px;
left:0px;
width:100%;
background:url(../image/main-menu-bg.gif) repeat-x #ff4606;
border-radius:6px 0 0 0;
z-index:1;
}
.main-menu .item-3, .main-menu .item-4, .main-menu .item-2 { display:none;}
.main-menu {
float:left;
}
.main-menu li {
float:left;
line-height:16px;
background:url(../image/separator-1.png) right 0px no-repeat;
padding-right:1px;
}
.main-menu li a {
text-decoration:none;
display:block;
font-size:17px;
padding:18px 20px 21px 21px;
color:#676767;
line-height:normal;
background:url(../image/main-menu-a.gif) 0 -1000px repeat-x;
}
.main-menu li a:hover { background-position:0 0; color:#FC5502;}
.common-home .main-menu li.first a { background-position:0 0; color:#FC5502; }
.main-menu li.first a { border-radius:6px 0 0 6px;}
.information-information .main-menu li.item-1 a { background-position:0 0; color:#FC5502;}
.product-special .main-menu li.item-5 a { background-position:0 0; color:#FC5502;}
.information-sitemap .main-menu li.item-6 a { background-position:0 0; color:#FC5502;}
.information-contact .main-menu li.item-7 a { background-position:0 0; color:#FC5502;}
/*****************************************************************************************************************************************************************************/

Under menu find:

.main-menu li a
and change:
padding:18px 20px 21px 21px;
1st figure is padding at top
2nd figure is padding at right
3rd figure is padding at bottom
4th figure is padding at left
You need to reduce figures for left and/or right until your additional category fits into the right of the menu.
Dont forget to delete your browsers cache after uploading the changed stylesheet or you may not see any changes!

Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm
Who is online

Users browsing this forum: No registered users and 24 guests