Alignment Issue

[SB50]

Is there any way to stop my headers and subheaders from going out of alignment when I make the text longer?

Store URL:

https://rarepearlskauai.com/

Password:

AB2007

[BiDeal-Discount]

Hi @SB50

Do you want it center like this?

if correct. Just need to add this custom css code:

.site-nav__dropdown .middle-menu {
      justify-content: center;
}

[Mustafa_Ali]

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 it solution

[SB50]

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.

[BiDeal-Discount]

Because the text of “Test Test Test” is too long so this is an issue. Do you want to center them like this?

[SB50]

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:

Hopefully that better explains what I’m trying to convey. Despite that “golden south sea pearls” and “white south sea pearls” are different text lengths, the headers above them do not go out of alignment. Is there any way to achieve this?

[BiDeal-Discount]

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.

[SB50]

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.

[BiDeal-Discount]

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

[SB50]

Yes!

This is what it looks like when I don’t have the bottom text longer than the header.

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 spaced because of the big gaps around the word “Rings”.

Is there any way to keep the headers from moving, and space them out a bit more if that makes it easier for you? I don’t want them too far apart, (the “ring” header I used as an example has a gap that’s a little too wide, I’d prefer it smaller) but if they’re too close I would not mind them spaced out just a little bit more if it helps with the bottom text. Thank you for your help so far by the way, I really appreciate it. If you need further specific clarification please let me know.

[BiDeal-Discount]

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 for each menu column

[SB50]

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

[BiDeal-Discount]

You can use like this:

.megamenu_title .site-nav__dropdown .middle-menu .middle-menu-list {
    max-width: 120px;
}

[SB50]

I inserted this CSS, and it doesn’t space the headers out, I can only make them smaller. For an example:

This is a picture of when I changed the px size to 60. It obviously made the spacing smaller. But when I try to make it bigger, nothing changes.

This is a picture where I set the px size to 200. There’s no difference in comparison to how it was before. Am I inserting the code into the wrong place or something? Cause for some reason I can only make it smaller with this, not bigger.

[BiDeal-Discount]

it’s different when you change the size you can see so you can change the size as you want.

if you want to fixed a width for all column you can consider to use width property instead of max-width

.megamenu_title .site-nav__dropdown .middle-menu .middle-menu-list {
    width: 120px;
}

[SB50]

I think you misunderstood what I meant. If you look at the pictures again from my last reply, you can see that I can only make the space between the headers smaller, not bigger. I can change it to 60px or 30px but the spacing doesn’t change when I go above 90px, which is not what I wanted. To clarify, I want more space between the headers, not less. Not sure why it doesn’t work either.