Pro Custom Header Responsive Scaling

[drfretboard]

I created a custom header with a text (font) logo (= headline).
This headline is currently not scaling as in “responsive” and after much research I still haven’t found how to implement this.

Please assist!

[christian]

Hey @drfretboard,

Please see the answer given by my colleague to a similar thread

Thanks.

[drfretboard]

Ok! This:

calc(14px + 2vw)

…actually works, thanks!

Then I have a next question:
How can we force the buttons inside the header to scale and prevent the logo from scaling too much?

[drfretboard]

Another strange occurrence, with my current implementation it downsizes correctly, but when resizing the screen back to a larger proportion, the title will not reach original size. How does this work?

[ruenel]

Hello There,

Thanks for updating in!

The button can’t be adjusted using the settings. To be more flexible, simply add another set of buttons container icons in it. You can then show/hide the buttons using the “Hide During Breakpoints” option. The button with text could be shown in desktops and hidden in smaller screens and the buttons with icons is hidden in desktops and only visible in smaller screens so that your header will have enough space to display.

The image logo can be prevented from scaling by adding a minimum width of the bar container. Find the “Customize” tab in your bar container of the image and use this custom inline css:

@media(max-width: 767px){
	$el {
  	min-width: 120px;
	}
}

Hope this helps.

[drfretboard]

For question one I implemented the calc(10px + 2vmax), (see reply one) solution which works when resizing the browser window.

However, when using the zoom-out function (ctrl+ ‘-’), the headline (font) reacts differently and will not scale properly.

Is there a general solution to fixing the proportion of the text when resizing window AND zooming in and out?

How to fix this issue so both instances work fine?

[rad]

Hi @drfretboard,

Are your referring to mobile browser zooming or desktop? In mobile, there should be no zooming due to this line

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If you’re referring to desktop zooming then you shouldn’t optimize your design based on zoom level. It’s non-standard and not all browser behave the same when it comes to zooming.

Thanks!