Header Mobile Formatting

[addabble]

Hello,

I’m testing a new header and need help with some minor problems.

1. On both desktop and mobile the menu’s close icon doesn’t seem to appear. How can I correct that?

2. The main header’s heading size is too large on mobile, but when I decrease the size within the tag, it throws off the alignment on the left side. What can I try to resolve this?

3. The social icons are cutoff on mobile, how can I fix it?

Thank you!

[rad]

Hi @addabble,

Thanks for reaching out.

1. The close button color is set the same as background color, please change it. It’s on the same setting where you change the off-canvas background color.

2. Would you mind providing a screenshot? It looks okay on my end, or perhaps you’re referring to the height of the header bar? If that’s the case then you’ll have to use multiple header bars and control its visibility for each devices. Example, the hide the taller header bar from mobile.

Please check this feature for the visibility https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

3. Same as 2#, use the visibility option to hide and display different header bars for each device. Example, on header bar displayed on the desktop, have the flex layout to ROW (this makes them inline), then on header bar displayed on mobile, have the flex layout set to COLUMN (this should make them stack together preventing overflows that result to clipping and cut-off).

And you can do it on both header bar and containers, (apply it on header bar if you wish to control multiple containers, or apply it on the container if you wish to control the elements).

Hope this helps.

[addabble]

Once I’m at computer, I’ll explore those solutions, thank you.

For #2, I was referring to the heading’s text being cut off on mobile:

[rad]

Hi @addabble,

I see, I recommend using the same Hide During Breakpoints feature, but for headlines. Simply add two or more headlines and display each other for specific devices. Then simply change the font size for each headline applicable for target device view.

The headline is responding well and changes, but the single word is just long that it won’t break into multiple lines. Adding it with another headline with small size for mobile view should fix it.

Thanks!