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! Thanks
Beau Clarke | Parts Plus Performance
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.
I can't seem to find the Menu section in my stylesheet? I've gone threw it a dozen times .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.
??
Your stylesheet is located at:PartsPlusPerformance wrote:I can't seem to find the Menu section in my stylesheet? I've gone threw it a dozen times .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.
??
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!
Who is online
Users browsing this forum: No registered users and 31 guests