Question about Mega Menu

Hi there,

I made a Mega Menu following this thread: LINK. But I had an issue: there is a big distance between raws and this is a problem for me because I have about 21 raws. Can I reduce these spaces?

It should be like this:

<ul id="" class="sub-menu">
 	<li id="" class=""><a id="" class="" href="">DIFFUSORI</a>
<ul id="" class="sub-sub-menu">
	<li id="" ><a id="" class="" href="">AMBRA</a></li>
	<li id="" ><a id="" class="" href="">ANGOSTURA</a></li>
	<li id="" ><a id="" class="" href="">ARANCIA CANNELLA</a></li>
	<li id="" ><a id="" class="" href="">BREZZA MARINA</a></li>
	<li id="" ><a id="" class="" href="">FRESCO BOSCO</a></li>
	<li id="" ><a id="" class="" href="">GERANIO</a></li>
	<li id="" ><a id="" class="" href="">LEGNO DI ROSA</a></li>
	<li id="" ><a id="" class="" href="">LEMON LIME</a></li>
	<li id="" ><a id="" class="" href="">LIQUIRIZIA</a></li>
	<li id="" ><a id="" class="" href="">MELOGRANO</a></li>
	<li id="" ><a id="" class="" href="">MIRTO DI SARDEGNA</a></li>
	<li id="" ><a id="" class="" href="">MUSCHIO BIANCO</a></li>
	<li id="" ><a id="" class="" href="">PATCHOULI</a></li>
	<li id="" ><a id="" class="" href="">PEPE NERO</a></li>
	<li id="" ><a id="" class="" href="">PURO FICO</a></li>
	<li id="" ><a id="" class="" href="">PURO LINO</a></li>
	<li id="" ><a id="" class="" href="">PURO NEROLI</a></li>
	<li id="" ><a id="" class="" href="">RUM CASSIS</a></li>
	<li id="" ><a id="" class="" href="">SCORZE SPEZIE</a></li>
	<li id="" ><a id="" class="" href="">TALCUM</a></li>
	<li id="" class="item-with-label item-label-new"><a id="" class="" href="">UVA FRAGOLA<span class="menu-label menu-label-hot">HOT</span></a></li>
</ul>
</li>
</ul>

But I did like this to solve the issue temporarily:

<ul id="" class="sub-menu">
 	<li id="" class=""><a id="" class="" href="http://dev.xtemos.com/new/product-category/woman/">PISTOLE SPRAY</a></li>
</ul>
<a id="" class="" href="XXXXXXXXXX">AMBRA</a>
<a id="" class="" href="XXXXXXXXXX">ANGOSTURA</a>
<a id="" class="" href="XXXXXXXXXX">ARANCIA CANNELLA</a>
<a id="" class="" href="XXXXXXXXXX">BREZZA MARINA</a>
<a id="" class="" href="XXXXXXXXXX">FRESCO BOSCO</a>
<a id="" class="" href="XXXXXXXXXX">GERANIO</a>
<a id="" class="" href="XXXXXXXXXX">LEGNO DI ROSA</a>
<a id="" class="" href="XXXXXXXXXX">LEMON LIME</a>
<a id="" class="" href="XXXXXXXXXX">LIQUIRIZIA</a>
<a id="" class="" href="XXXXXXXXXX">MELOGRANO</a>
<a id="" class="" href="XXXXXXXXXX">MIRTO DI SARDEGNA</a>
<a id="" class="" href="XXXXXXXXXX">MUSCHIO BIANCO</a>
<a id="" class="" href="XXXXXXXXXX">PATCHOULI</a>
<a id="" class="" href="XXXXXXXXXX">PEPE NERO</a>
<a id="" class="" href="XXXXXXXXXX">PURO FICO</a>
<a id="" class="" href="XXXXXXXXXX">PURO LINO</a>
<a id="" class="" href="XXXXXXXXXX">PURO NEROLI</a>
<a id="" class="" href="XXXXXXXXXX">RUM CASSIS</a>
<a id="" class="" href="XXXXXXXXXX">SCORZE SPEZIE</a>
<a id="" class="" href="XXXXXXXXXX">TALCUM</a>
<a id="" class="" href="XXXXXXXXXX">UVA FRAGOLA</a>
<a id="" class="" href="XXXXXXXXXX">VANIGLIA</a>

But in this way I can’t use the labels (NEW or HOT). I like the distance used now (on the image attached), but I need to add also the labels 😕 Please help me!

Thank you very much!

Giulio

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the first code and provide us a link where we can see it. We will prepare a code snippet to reduce the space between links.

Regards

Hi,

the result with the first code is on the image that I attached. The first code is a perfect sample of what I would to do. But as I told you the spaces between rows are really huge. I’d like something as the image that I attached to first message. Do not worry if it seems that there is not space for the label because the “new” is only one.

Thank you.

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS area in Theme Settings

.basel-navigation .menu>li.menu-item-design-full-width .sub-sub-menu li a, .basel-navigation .menu>li.menu-item-design-sized .sub-sub-menu li a {
    padding: 3px 0!important;
}

Thank you very much. It works, but I preferred with 1px 🙂

.basel-navigation .menu>li.menu-item-design-full-width .sub-sub-menu li a, .basel-navigation .menu>li.menu-item-design-sized .sub-sub-menu li a {
    padding: 1px 0!important;
}

OK, you are welcome!

[Author]

Posts