Pro Header Flexbox issue

[armada]

Hi,

I’ve set up a full screen header containing 2 bars:

• bar 1: full width menu / mobile menu (showing according to breakpoints)
• bar 2: logo / texts+cta button / image anchor / sponsors

In bar 2, I assigned different flexbox value, so the space would adapt to each item heights. It works perfectly for Chrome/Firefox desktop and on Firefox mobile.

But it seems on chrome/safari mobile, the flex values of each items are not respected, and the 4 bar height are divided equally, instead of adapting to the content. Subsequently, the button is completely hidden.

Can you please tell me how I can fix this please?

Page where it happens: https://digityser.org/home-a/
Screenshot:

[Joao]

Hi There,

I Can replicate the issue also on my end. Would you please provide your login credentials on a secure note so we can take a closer look on your setup?

Thank you

[armada]

Sure, here you go.

[paul.r]

Hi,

To fix it, you can add this in Header > CSS

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

Hope that helps.

[armada]

Thanks, that worked beautifully.

Is it something that I have to expect next time I use the header or is a one-off problem only seen on my website?

[XSupport]

This will take care any upcoming header job you’re going to do on your site. No need to use that custom codes again.

[armada]

Hi! I have encountered a bug.

When hovering on the inline menu links, the brackground color change from green to orange as configured, but on the bottom there’s extra pixels. If I remove the code, it behaves properly, the orange background color being in line with the green background color.

[christian]

Hey armada,

I don’t see the extra pixels. What browser are you using?

Thanks.

[armada]

I tested using firefox 57 and Firefox 59.

The issue is not present on chrome.

[christian]

Try replacing the code provided previously with this:

.hm9 .x-bar-container {
    height:auto;
}

The code provided before applies to all containers. The height only needs to be applied to the containers of the specific bar.

Notice the .hm9 part of the code I provided? That is the bar’s dynamic ID. That will change in case you add a bar and/or reorder your bars in the future so the code I provided won’t work anymore. For a more reliable solution, assign an ID to your bar like this.

Then, change .hm9 to #bar-description. You are free to use any name you want for the ID or Class as long as you follow the naming conventions.

Hope that helps.

[armada]

Thanks, that’s perfect, and I named the ID like a rockstar.

[friech]

Cool, we are delighted to assist you with this.

Cheers