Inherited container height for cart dropdown causing problems

[kgpthemex]

Hi Guys!

So, I’m facing a strange problem that I can’t figure out. I have attached an image showing what I’m working with. I added a “Cart Dropdown” to one of my containers in the Pro Header, and for whatever reason, there’s a height being applied to the x-mod-container. I have checked everywhere and I can’t seem to figure out why it has this height. Even if I apply a max height or anything, it applies it to the a tag within the x-mod-container.

None of the flex settings within the parent container is affecting this and as you can see, the cart container is pushing everything and even overlapping it due to this crazy height.

Help will be appreciated!

[ruenel]

Hey There,

Thanks for posting in! To assist you with this issue, would you mind providing the url of your site so that we can inspect the cart element in your header.

Thank you in advance.

[kgpthemex]

Hi @RueNel,

Thank you for the quick response!

Please see the secure note for the URL.

[paul.r]

Hi,

We don’t see any secure note.

Do you mind adding it again.

Thanks

[kgpthemex]

Hi @paul.r,

Wow, you guys are fast. I was just putting it in. Please see above.

By the way, the header in question is only for the home page.

Thanks

[lely]

Hi There,

The height is defined on the stack you were using. See this: https://screencast-o-matic.com/watch/cbXvh024Fo
Overlap happens because the entire Container space is not enough to display everything in 1 ROW, then it is displayed to be on center.

First, let’s try to adjust the width of Register/Login container:

See the 3 settings I have change. It will make my account inline with other menu links.
Then inspect the cart dropdown, click unlink margin, set tops margin to 1.8 em to align it on other content:

The height has nothing to do with it. See on that second screenshot it doesn’t overlap and aligned properly.

Also inspect nav inline element then under Flex Layout: Choose Start on for Horizontal.

Hope this helps.

[kgpthemex]

Hi @Lely,

Thank you for the thorough walk-through. I actually failed to mention one thing: I don’t want the Nav and the cart to be horizontally aligned. I want them stacked, like I had them. I haven’t quite gotten to adjusting the width/height of the cart because I was distracted by the container height that seem to disrupt what I was intending on doing. Ideally, I want them to be stacked and centered.

How would I do that?

Thanks again.

[paul.r]

Hi,

You can try adding this in Header > CSS

.my-bar  .x-mod-container {
    height: auto;
}

Hope that helps.

[kgpthemex]

Thank you @paul.r,

That was the trick!

[lely]

You’re always welcome!

Cheers~