How To Align Top Menu Centered (Categories)

Developers Frontend
1

Hello,

Please help me to fix my categories on top. I want them to make them centered as it is starting from left to right.

Please help me.

Thanks.

center.jpg

2

Try to add the following code to the CSS section of the Theme editor

@media (min-width: 478px) {
.ty-menu__items {
    display: table;
    width: 100%;

.cm-menu-item-responsive, .ty-menu__item-nodrop {
    display: table-cell !important;
    float: none;
    text-align: center;
}



}

}

3

Hi, I have used this code for our category list. We have quite a lot of categories and the alignment used in this css snippet is nice. However the complete list does not fit well on the page.

How do I manage that it becomes in two (or maybe 3) rows?

The dropdown is perfect for now. It is just the main list of the categories that should be shown in two rows.

Thanks, your help would be appreciated.

Menu1.png

menu2.png

4

Please share URL of your store

5

https://twente.halloboer.nl/?store_access_key=77

I tried to manage it in more columns and it worked out. It is not that looking beautiful now. I liked it more when it is also vertical alinged in certain cells with the original code.

The active code that I use now is: 

@media (min-width: 478px) {
.ty-menu__items {
    display: table;
    width: 100%;
text-align:center;

.cm-menu-item-responsive, .ty-menu__item-nodrop {
    display: inline-table !important;
    float: none;
    text-align: center;
}
}
}
6

You can add the following code to the CSS section of the Theme editor

.category-menu-hb .cm-menu-item-responsive, .category-menu-hb .ty-menu__item-nodrop {
    width: 6%;
}

But look and feel will depend on the screen size

7

This is perfect! Exactly what we want.