Post by LeahStorm2 » Sat Jan 04, 2014 1:55 am

Please believe me that I have searched the forums and played with the header.tpl and stylesheet.css to find how to do this, but I can't.

Here's the site: http://www.leahinc.com. The theme template is Dark Purple from @dswww. I have not found a way to contact dswww.

I need to do 3 things:
1. Move the menu/nav bar up. There is too much space between the logo / home, wish list etc, and the menu bar.
2. Center the text on the menu bar
3. Fix the drop down products menu, because it's got a gap between the menu itself and the drop down list.

Can someone tell me which file and what lines to adjust to get those done?

Newbie

Posts

Joined
Fri Jul 06, 2012 10:39 am

Post by labeshops » Sat Jan 04, 2014 3:47 am

LeahStorm2 wrote:
I need to do 3 things:
1. Move the menu/nav bar up. There is too much space between the logo / home, wish list etc, and the menu bar.
2. Center the text on the menu bar
3. Fix the drop down products menu, because it's got a gap between the menu itself and the drop down list.

Can someone tell me which file and what lines to adjust to get those done?
1. Edit your stylesheet.css, header section and change the height: 150px to height: 110px; or similar
2. & 3. require edits in the menu section of stylesheet.css. Look at the ul and li sections.

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 LeahStorm2 » Sat Jan 04, 2014 4:44 am

THANK YOU! I managed to get the first 2 issues fixed. Thank you.

For others who need this:

Code: Select all

#header {
	margin:0 auto 0 auto;
	padding:0;
	width:980px;
	height: 110px;    <------------- changed from 150, and it moved menu bar up.
	margin-bottom: 7px;
	padding-bottom: 4px;
	position: relative;
	z-index: 99;

Code: Select all

.menu > ul > li > a {
	margin:0;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	font-weight:normal;
	display: block;
	padding: 13px 15px 16px 15px; <---------------- 13px was 23px. Centered text on menu bar.
	z-index: 6;
	position: relative;

Newbie

Posts

Joined
Fri Jul 06, 2012 10:39 am

Post by LeahStorm2 » Sat Jan 04, 2014 4:46 am

I still can't figure out how to get the drop down menu closer to the menu bar itself. I've tried tons of changes, but they all changed other stuff. Do you have any ideas where that might be?

Code: Select all

/* menu */
#menu {
	background:url('../image/menu-bg.png') repeat-x;
	border-bottom:none;
	height: 43px;
	width:100%;
	padding:0;
}
.menu{
	margin:0 auto 0 auto;
	padding:0;
	width:980px;				
}
.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu > ul > li {
	position: relative;
	float: left;
	z-index: 20;	
}
.menu > ul > li:hover {
}
.menu > ul > li > a {
	margin:0;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	font-weight:normal;
	display: block;
	padding: 13px 15px 16px 15px;
	z-index: 6;
	position: relative;
}
.menu > ul > li > a:hover{
	background:none;
	color:#000;
	border:none;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;				
}
.menu > ul > li > div {
	display: none;
	position: absolute;
	z-index: 5;
	padding: 5px;
	border: 1px solid #000;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-khtml-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	background: url('../image/menu.png');
}
.menu > ul > li:hover > div {
	display: table;
}
.menu > ul > li > div > ul {
	display: table-cell;
}
.menu > ul > li ul + ul {
	padding-left: 20px;
}
.menu > ul > li ul > li > a {
	text-decoration: none;
	padding: 5px;
	color: #FFFFFF;
	display: block;
	white-space: nowrap;
	min-width: 120px;
}
.menu > ul > li ul > li > a:hover {
	background: #000;
	color:#fff;
}
.menu > ul > li > div > ul > li > a {
	color: #FFFFFF;

Newbie

Posts

Joined
Fri Jul 06, 2012 10:39 am

Post by labeshops » Sat Jan 04, 2014 6:11 am

try changing the bottom padding on:
padding: 13px 15px 16px 15px;

so change the 16px to like 10px.

I think that is where it is coming from my my firebug is being stupid on trying to adjust it.

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 LeahStorm2 » Sat Jan 04, 2014 9:59 am

OH WOW... I seriously thought I tried that one. :choke:

You are a genius. 8) I also tried firebug and couldn't see exactly what it was.

Thank you!!!

Newbie

Posts

Joined
Fri Jul 06, 2012 10:39 am

Post by labeshops » Sat Jan 04, 2014 9:25 pm

No problem :)

Yeah, firebug seems to get wonky with nested css classes :P Inspecting the menu text element though I could see the box for it was much deeper than it needed to be and lined up with the top of the drop down window which is what gave me the clue.

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
Who is online

Users browsing this forum: No registered users and 77 guests