Menu Responsive Font Size

Support
#1

Hello,

The font-size in my main header nav isn’t resizing with window size. Am I missing a setting that makes the menu font size scale down with the browser window until my mobile breaking point?

I’ll post my site credentials in a secure note so you can see the issues on my live site.

Thanks!

1 Like
#3

Hello @frankburder,

Thanks for asking. :slight_smile:

Header is working fine on my end. I don’t see any issues with the font size. Please see screenshot. https://cloudup.com/cPOi433XNw0, https://cloudup.com/c2hTJrVSXfv.

Thanks.

#4

@Prasant

It’s the desktop menu text that’s not resizing properly. See screenshot here.

#5

Hi there,

It’s not gonna resize since the Root font sizes are all the same on different devices. Please go to Theme Option > Typography > ROOT FONT SIZE and set different sizes for each device (XS, SM, and etc.). You may also change the unit to em.

Thanks!

#6

Hello, thank you for the reply. So I set those sizes and still no luck. Here’s links to see what’s happening on my end:

Typography settings:

Issue #1 – the “request info button” isn’t properly resizing:

Issue #2 – The text isn’t resizing with my browser window. It’s stays the same size and cuts off the page. Also, the header switches from transparent black to a solid gray color at this breaking point even though I don’t have that changed in my settings that I’m aware of.:

#7

Hi There,

I have added the following CSS rule into your Theme Options > Global CSS area. Could you please try clearing your cache and re-test your header again.

.e351-1.x-bar, .e351-7.x-bar, .e351-12.x-bar {
    font-size: inherit;
}

Hope that helps.

#8

Almost… see screenshot here:

As you resize the browser, the text (and button) cut off on the right.

#9

Hi There,

I would suggest reducing the link spacing in order to fix that.

Hope it helps

#10

Is there not a way to make all of the content in the header container responsive to a certain break point?

#11

Hey @frankburder,

If you look closely, elements in that bar are responsive because of the default responsive behavior set in the theme. However, your menu is just too long for 1366px screen width down to 981px. It is best that you rethink what goes into your menu. There is no automatic way to resolve that. There are many responsive design setups and there’s no way to account for all of them automatically. What do you want to do in this situation?

Because the problem is spatial limitation, you would need to sacrifice an item or two.

Here are some options:

####1. Reduce spacing between menus as suggested by @joao previously
####2. Reduce the base font size of the menu sacrificing legibility

The base font size in your setup is set to 1.2 em. That means, it is 1.2 times 16px in screens above 1200px and 1.2 times 14px within 1199px to 980px screen widths.

16px and 14px are taken from the Typography settings

In 1199px screen size, here’s how it looks with 1.2 x 14px.

If the screen has not yet reached 1199px, here’s how it looks.

####3. Reduce the logo size.
####4. Reduce the number of your menu items.
####5. Use custom media query to make the menu font size small starting 1366px screen width down to 981px. This is not recommended because you will need to reduce the font size and spacing significantly. Sacrificing legibility in favor of responsive function. This would also be outside the scope of our support as this would be involved.

Thanks.

#12

Thank you very much for the detailed options. I think I found a solution. I reduced the font slightly and also the logo. I think I’m good on this one now. Thanks to everyone for your input. Great support, guys!

#13

You’re welcome, Frank. Glad we could help.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.