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
7 years 1 day ago #4151 by mikegreece
mikegreece created the topic: How do I increase the width of the drop down menu
How do I increase the width of the topmenu’s drop down submenu (hot_ecommerce template)?

Please Log in to join the conversation.

More
7 years 1 day ago - 7 years 1 day ago #4157 by ivan.milic
ivan.milic replied the topic: Re: How do I increase the width of the drop down menu
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: 7 years 1 day ago by ivan.milic.

Please Log in to join the conversation.

More
7 years 15 hours ago #4166 by mikegreece
mikegreece replied the topic: Re: How do I increase the width of the drop down menu
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
7 years 5 hours ago - 7 years 5 hours ago #4172 by ivan.milic
ivan.milic replied the topic: Re: How do I increase the width of the drop down menu
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: 7 years 5 hours ago by ivan.milic.
The following user(s) said Thank You: mikegreece

Please Log in to join the conversation.

More
6 years 11 months ago #4184 by mikegreece
mikegreece replied the topic: Re: How do I increase the width of the drop down menu
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 11 months ago #4195 by ivan.milic
ivan.milic replied the topic: Re: How do I increase the width of the drop down menu
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.083 seconds

Links, Partners and Social Media