Search Form and Social Buttons

HotThemes Logo and Top Menu

To request a forum account, please login here and open support ticket. Only customers with active order(s) can open forum account!

× Discussion about "eCommerce" VirtueMart/Joomla template

Topic-icon How do I increase the width of the drop down menu

More
6 years 1 month ago #4151 by mikegreece
How do I increase the width of the topmenu’s drop down submenu (hot_ecommerce template)?

Please Log in to join the conversation.

More
6 years 1 month ago - 6 years 1 month ago #4157 by ivan.milic
Administration
-Extensions->Template Manager
-Then click on template
-Go to Edit CSS
-Select Layout.css and click Edit

To increase height of item,add thin entity:
#topmenu_pad ul li ul li
{
padding: 5px;
}

or

To increase height of list that drops down:
#topmenu_pad ul li ul
{
height: 300px;
}


Read values are examples you should change that to get what you desire.
Last Edit: 6 years 1 month ago by ivan.milic.

Please Log in to join the conversation.

More
6 years 1 month ago #4166 by mikegreece
Thanks for the help but I probably did not explain what I want correctly.

My question was how to change the width (or length if you prefer) of the drop down menu column. Not the height of each drop down menu line.

If you send me some new code to add to it, please be specific about where to enter it.

This is the CSS code for the top menu:

/* top menu */

#nav,#nav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
z-index:120;
}

#nav ul {
display:none;
}

#nav a {
display:block;
padding:0px 8px;
margin:0;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:17px;
text-transform:uppercase;
}

#nav > li.active {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav > li:hover {
-moz-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav li:hover ul li a {
margin:0px 5px;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

#nav li:hover ul {
-moz-border-radius:0 6px 6px 6px;
-webkit-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
}

#nav li:hover ul li a:hover {
margin:0px 5px;
}

#nav li {
float:left;
margin:0 5px;
position:relative;
line-height:27px;
}

#nav li ul li,#nav li ul li ul {
margin:0;
padding:0;
float:none;
cursor:pointer;
}

#nav li ul, #nav li ul ul {
padding-bottom:10px !important;
}

#nav li ul a {
width:145px;
line-height:normal;
padding:5px 10px;
border-bottom:1px solid #6e829a;
}

#nav li ul ul {
left:170px;
top:0;
margin:0;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul {
display:none;
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul {
display:block;
}

#nav ul ul {
top:0;
z-index:200;
}

Please Log in to join the conversation.

More
6 years 1 month ago - 6 years 1 month ago #4172 by ivan.milic
Hi,
try this - added property is marked red (change value to what you need).

/* top menu */

#nav,#nav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
z-index:120;
}

#nav ul {
display:none;
}

#nav a {
display:block;
padding:0px 8px;
margin:0;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:17px;
text-transform:uppercase;
}

#nav > li.active {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav > li:hover {
-moz-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav li:hover ul li a {
margin:0px 5px;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

#nav li:hover ul {
-moz-border-radius:0 6px 6px 6px;
-webkit-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
width:400px;
}

#nav li:hover ul li a:hover {
margin:0px 5px;
}

#nav li {
float:left;
margin:0 5px;
position:relative;
line-height:27px;
}

#nav li ul li,#nav li ul li ul {
margin:0;
padding:0;
float:none;
cursor:pointer;
}

#nav li ul, #nav li ul ul {
padding-bottom:10px !important;
}

#nav li ul a {
width:145px;
line-height:normal;
padding:5px 10px;
border-bottom:1px solid #6e829a;
}

#nav li ul ul {
left:170px;
top:0;
margin:0;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul {
display:none;
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul {
display:block;
}

#nav ul ul {
top:0;
z-index:200;
}
Last Edit: 6 years 1 month ago by ivan.milic.
The following user(s) said Thank You: mikegreece

Please Log in to join the conversation.

More
6 years 1 month ago #4184 by mikegreece
thanks for the help but there is just one more problem.

The column width increased but the extra width cannot take text nor is underlined – check attachment. Can we also fix this?

also how can i center my logo on the middle of the page (i have to change the margins or something?)?

thanks again
Attachments:

Please Log in to join the conversation.

More
6 years 1 month ago #4195 by ivan.milic
Try by adding this to the bottom of that css file:

#nav li ul li {
width:100%;
}

Please Log in to join the conversation.

Time to create page: 0.125 seconds

Links, Partners and Social Media