Is there any way to stop my headers and subheaders from going out of alignment when I make the text longer? [Screenshot 2025-05-18 224722.png] Store URL: https://rarepearlskauai.com/ Password: AB2007

Hi @SB50 Do you want it center like this? [BiDealDiscount_0-1747645087028.png] if correct. Just need to add this custom css code: .site-nav__dropdown .middle-menu { justify-content: center; }

[Mustafa_Ali_0-1747645613877.png] hey @SB50 dear follow these steps Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the -----> before the body -----> if this code work please do not forget to like and mark i…

Because the text of “Test Test Test” is too long so this is an issue. Do you want to center them like this? [BiDealDiscount_0-1747792005966.png]

Not exactly, but close. I was hoping there would be a way to have the headers above be completely unaffected by the bottom text, even if the bottom text is longer than the header. Something like this: [unnamed (2).jpg] Hopefully that better explains what I’m trying to convey. Despite that “golden…

I’ve not actual understand what you mean because I see the golden south sea pearls & white south sea pearls still go out of the title Shop by pearl type alignment.

Yes, the bottom part does go out of alignment but I’m mainly talking about the headers. I just wanna stop my main header “Rings” from moving around, even if the bottom text is longer. Similar to the example I showed.

I see the menu “Rings” fixed on left, not moving around as you said. So can you detail which part of moving?

Yes! [Screenshot 2025-05-22 215038.png] This is what it looks like when I don’t have the bottom text longer than the header. [SB50_0-1747986785521.png] This is what it looks like when it the bottom text is longer than the header. I like your original solution, but the headers aren’t evenly sp…

Thank you for your response. To make the Right text to center, you can use this Custom CSS: .header__submenu .site-nav-dropdown__link { justify-content: center; } If you actual don’t want the space between them too far while still want to the long text, we can consider to set the max-width fo…

Got it. I used your CSS, thank you! How do I set the max width for each menu column?

Alignment Issue

Store Design

SB50 May 20, 2025, 7:10am 4

This fixes a problem I didn’t realize I had, so thank you! However, I was referring to the “Rings” and “Test Test Test” headers. They go completely out of alignment if they get too long and I don’t know how to fix it.

Topic		Replies	Views
Header menu aligment (dawn theme) Store Design design , header , customizations , css	4	30	June 26, 2024
Change alignment of text in header dropdown menu Store Design menu , header , css , third-party-themes	0	44	October 17, 2023
How can I reset my header menu to its default alignment? Store Design customizations	2	36	December 23, 2023
How can I align my header menu into one line? Store Design	8	52	October 21, 2021
Change Drop Down Menu Store Design design , header , css	14	85	April 4, 2026

Alignment Issue

Related topics