Aline menu navigation

[Suco]

 Hello guys can you help me align this menu 

In desktop and mobile view please ? 

I use refresh theme 

https://www.behumblee.com/

Pass-Humblee3030

[expressindiaa]

You need to hide desktop menu in mobile view because in the mobile menu is already working. 

[Suco]

Yes , I try but don’t work 

[expressindiaa]

You need to toggle this id 
shopify-section-sections--17005268730034__navigation_1_nFW3Gm
Hide in mobile and show in desktop 

[Suco]

Hello bro, I don't think you understand, I want to align the navigation bar, it's already an extreme code that I put but I can't align

[expressindiaa]

I have understand it should be like that

[Suco]

Like this brother 

 

[Spac-es · Accepted solution]

I see that you almost have the issue resolved! You just need to remove the attribute color: black; to get rid of the "0" and add this other attribute to prevent overflow on the X axis:

max-width: 100vw;

the final code look something like this:

@media (max-width: 768px) {
  #shopify-section-sections--17005268730034__navigation_1_nFW3Gm ul.list-no-bullet {
    display: flex !important;
    margin: -20px !important;
    font-size: 12px;
    justify-items: center;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    font-family: system-ui;
    max-width: 100vw;
  }
}

Before & After:

[Suco]

Goat ! Thanks everyone 

[Spac-es]

This is my design proposal. The words "Main Menu" are hidden within the section and count as an additional item in the list of elements, preventing the possibility of having a two-row menu. My solution is to add a single centered and more legible column (using a different typography), along with adding two lines, one above and one below, to contain the menu and make it more visually appealing.

Add this code in your base.css file:

@media (max-width: 768px) {
  ul.list-no-bullet {
    display: grid !important;
    margin: 0px !important;
    font-size: 12px;
    justify-items: center;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    font-family: system-ui;
    color: black;
  }
}

Result:

[Suco]

 Hello , yes is like this but , you can align like the image ? 

[expressindiaa]

your menu is too big and it will scroll if you align in one line

[Suco]

I know, I'll change later just to stay with two categories