Hello guys can you help me align this menu
In desktop and mobile view please ?
I use refresh theme
Pass-Humblee3030
Topic summary
Goal: align the navigation menu in Shopify’s Refresh theme on desktop and mobile to match a provided screenshot.
Key steps and proposals:
- Initial advice suggested hiding the desktop menu on mobile by toggling the section ID (shopify-section-sections–17005268730034__navigation_1_nFW3Gm). OP clarified they want alignment, not just hiding.
- A design proposal centered the mobile menu in a single-column grid with top/bottom borders via CSS (@media max-width:768px targeting ul.list-no-bullet). Result screenshots were shared.
- OP asked for alignment like their image; note that the current menu is too long for a single line, but they plan to reduce to two categories later.
Final solution (mobile):
- Target the specific navigation UL and switch to display:flex, adjust margins, keep borders, and set max-width:100vw to prevent horizontal overflow. Also remove color: black to eliminate a stray “0” artifact. Code provided under @media (max-width:768px).
Outcome: Before/after images show correct alignment; OP confirmed it works. Images and CSS snippets are central to understanding. Status: resolved.
Yes , I try but don’t work
You need to toggle this id
shopify-section-sections–17005268730034__navigation_1_nFW3Gm
Hide in mobile and show in desktop
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
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:
your menu is too big and it will scroll if you align in one line
I know, I’ll change later just to stay with two categories
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:
1 Like
Goat ! Thanks everyone