Menu customization

Hello,
since i have many categories in 2 words,i would like to make them appear like this (one word under the other),so that they fit well.Is it possible?

Hi,

Where exactly on your website do you want to do this?

Regards

In the header menu

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.main-nav .menu > .menu-item {
    vertical-align: middle;
}

.main-nav .menu > .menu-item > a {
    max-width: 110px;
    line-height: 20px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    text-align: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

header.act-scroll .main-nav .menu > li > a {
    line-height: inherit;
}

Regards

Is much better now,thank you.
I want to make it like this menu.
So i want to set a color only in the menu(not in all header) and separators with a different color,so that every part in menu will be distinctive.

Also,is it possible to create a subsubcategory (my menu is created from products categories)that will not be permanently open ,but in mouse over?See for ex. closed – open

Sorry, but these requests need more complicated customization and it is out of our theme support scope.

My second question is customization?
There is not the possibility to create a submenu that opens only in mouse over?

No, but we see that you have already created menu items with dropdowns. Do you need additional help for this?

Like i said you i want to make the same in submenu.So below the subcategory i want to create a menu item that opens only when i see this particular subcategory.Now are all the items always open.

Unfortunately, there is no such feature in our menu. If you create a mega menu dropdown, it can’t have subitems that will be displayed on hover.

And also is not possible to set a different color in the header menu?

Hello,i could change the menu color,but now is visible that with the code that you gave me above,some categories do not fit correctly.screenshot
What should I change in this code?

Hello,

You can increase max-width parameter for all menu items in the previous snippet. Or you can specify max width for an individual menu item by pointing his id. For example, if your menu id is 125, CSS code snippet will look like this.

.main-nav .menu > .menu-item.menu-item-125 > a {
    max-width: 125px;
}

You can find menu id from the developer tools – screenshot.

Hello,
i have tried but by increasing the max-width parameter,it does not fit the whole menu,because remains an empty space to the right.There is a way to make the menu full width?
See here

Yes, but there is no other solution for your request. Try to decrease the number of menu items to make them fit the space for the navigation.

I don’t want decrease the number,because are products categories,so is impossible!
If i make the menu full width,then the menu item that does not fit now,it will fit.

But they may not fit on devices with smaller screens.

Can we try please?
Which is the code?

Hello,
i have found solution with this code:
.main-nav .menu>li>a {
padding-left: 5px;
padding-right: 5px;
}

Yes, this code can free some additional space but decrease margin between items.

Hello again.
Since i have created submenu,the arrows for the main elements with one word do not fit.
I tried to increase max-width parameter for these elements,but nothing happens.
See here
Thank you

It happens because you have changed padding-right parameter for your links to 5px. You need to increase it.

[Author]

Posts