Customizing Mega Menu 1 and 2

[vistad]

Hi guys,

I am trying to customize either the 1st or the 2nd megamenu to my liking and I need to gain some understanding how to do that – please tell me how to do that. I’d prefer that over a ready code.

As to mega menu 1:
There is the <a href="#">menuItem</a> and the menu arrow after it. IMO the menu arrow is very far away from the menuItem. How I can bring it and the <li>...</li> closer to the menuItem? In other words how to change distance of the menu arrow and <li>...</li> from the menuItem?

<li>...</li> can hold longer lines, but the menuItem can not – lines propagate to the adjacent <li>...</li> element. How to wrap lines in the menuItem?

As to mega menu 2:
I found that to wrap lines in <li>...</li>, the “white-space: nowrap;” should be set to “wrap”:

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap; // prevent links from randomly breaking onto new lines
    background-color: transparent;
    border: 0;
}

But this file, _dropdown-item.scss is virtual, it is not present on my computer, it is connected from the cloud.
How to fold lines in <li>...</li>?

Thank you!

---

• This topic was modified 5 years, 9 months ago by Support2.

[Support2]

Hello,
 
You can do that adding some custom classes.

In Mega Menu 1 first add a custom class on li like:

<li class="dropdown dropdown-mega custom-dropdown-mega">

after, into your (css.custom.css) add this code :

@media(min-width: 992px) {
    .custom-dropdown-mega .menu-arrow {
        padding-left: 10px !important;
        right: auto !important;
    }
    .custom-dropdown-mega .menu-arrow:after {
        left: auto !important;
    }
    .custom-dropdown-mega .dropdown-submenu {
        padding-right: 40px;
        display: table !important;
    }
}

In Mega Menu 2 add the custom class.

<li class="dropdown dropdown-mega dropdown-mega-style-2 custom-dropdown-mega-2">

And in your (css/custom.css) add

.custom-dropdown-mega-2 .dropdown-item {
    white-space: unset !important;
}

Please, try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[Author]

Posts