Header logo sizing when enlarging text

[highlandartsvt]

Hi,

I am struggling trying to figure out how to keep my brand logo in my top header from scaling up and overlapping the menu on mobile when users have enlarged text settings. Some users set their accessibility settings on their phones to enlarge type on websites, especially our demographic, which is older folks. Is there a way to help those users still be able to access our menu through setting the right scaling settings. I can’t seem to figure this out. See screenshot where you can see what is happening when someone sets their phone to enlarge text.

Thanks for your help and suggestions

• Erin

[highlandartsvt]

[ruenel]

Hello Erin,

Thanks for writing in! I have logged in to your site and inspected your custom header. I found out that you have two separate bars with two images of different sizes. The problem was that you have used the “Hide During Breakpoints” option incorrectly. I ended up swapping the bars of which one will show up on smaller screens which has this custom css:

@media(max-width: 480px){
  $el.x-image {
    max-width: 260px;
  }
}

I have updated the bar settings and the custom css of the container as well into this instead:

@media(max-width: 767px){
  $el.x-image {
    max-width: 190px;
  }
}

You also need to apply these changes to the other custom headers.

Kindly the custom header of your homepage (Main Header) now.

[highlandartsvt]

Hi - Thank you so much for your help!

I’m a bit confused by your response. I don’t have two bars, one mobile and one desktop. I have one bar with different containers (containers for mobile and containers for desktop). So, I’m confused with your response about swapping the bars. Maybe you are saying you swapped the containers?

I see where you input the css onto mobile logo image element to this:
@media(max-width: 767px){
$el.x-image {
max-width: 190px;
}

Then you say that you updated the bar settings - great thank you! But you also say that you input custom css onto the container. This I do not see. I’ve checked all the container and none of them have any css.

I do not see this custom css anywhere:
@media(max-width: 480px){
$el.x-image {
max-width: 260px;
}
}

Can you help to point me to what you are referring to. Thank you!

• Erin

[ruenel]

Hello Erin,

Yes you do have two separates bars. The image were displayed utilizing the the “Hide During Breakpoints” option which was previously setup incorrectly. I meant that I swapped the “Hide During Breakpoints” option setting to be able to display/hide which container on the correct screen size.

You had added a custom css:

@media(max-width: 480px){
$el.x-image {
max-width: 260px;
}
}

which then I had updated it to:

@media(max-width: 767px){
 $el.x-image {
  max-width: 190px;
 }
}

so that the right image size will be displayed in the correct and respective screen size. Your image logo should be displaying the correct and decent image size in smaller screen (and even when the texts were enlarge) now.

Hope this explains it briefly.

[highlandartsvt]

Great, ok I understand better, thank you.

I see you do not mean two literal bars. But in theory two bars due to have two different image elements.

Thanks for your help!

[ruenel]

You are most welcome Erin!