Solved

Aline menu navigation

Suco
Explorer
109 0 14

IMG_2681.png

 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

Accepted Solution (1)
Spac-es
Shopify Partner
376 109 130

This is an 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:

 

before.PNGresult.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 12 (12)

expressindiaa
Shopify Partner
7 0 0

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

Suco
Explorer
109 0 14

Yes , I try but don’t work 

expressindiaa
Shopify Partner
7 0 0

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

Suco
Explorer
109 0 14

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
Shopify Partner
7 0 0

I have understand it should be like that

1.png

Suco
Explorer
109 0 14

Like this brother 

IMG_2683.jpeg

Spac-es
Shopify Partner
376 109 130

This is an 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:

 

before.PNGresult.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Suco
Explorer
109 0 14

Goat ! Thanks everyone 

Spac-es
Shopify Partner
376 109 130

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:

 

result.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Suco
Explorer
109 0 14

IMG_2683.jpeg

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

expressindiaa
Shopify Partner
7 0 0

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

Suco
Explorer
109 0 14

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