PRO HEADER | How to shrink "navigation inline" top link text?

Support
#1

Hi,

I’m busy creating a new header and wonder if its possible to shrink the top links of the inline navigation? The logo shrinks perfect when i scroll down, but the text just moves higher without having any responsive effect on the top links…

Is there a way to solve this?

Cheers, Pascal

#2

Hello Pascal,

Thanks for writing in! To assist you with this issue, could you please provide us the url of your site so that we can take a closer look at your header.

Best Regards.

#3

Sure! This is more a general question, but i would like to use it for this website especially. When it’s possible i would make the Top Links (Text and Icons) a little bit bigger.

URL is attached to the secure note.
Cheers, Pascal

#4

Hello There,

Thanks for writing in! Please edit your header again and in the inspector of the navigation element element, find the font size setting. Please see the image below:

Hope this helps.

#5

Hi, tanks, but that was not the answer for my question… The issue is about the shrinking. I know haw to make the font larger, but how does the larger font shrink when i start to scroll down?

I appreciate your answer!
Pascal

#6

Hi There,

Regretfully, there is no way to make the navigation text responsive based on the Bar Height (unless we write a custom JavaScript about it). The logo is an image, its easier to make an image a responsive because you only need to put a height and width 100% to it and it will respond to its container height/width, but that is not the case with font-size, font-size has a vw (viewport width) and vh (viewport height) unit, but that is not really relative to the element’s container but on the viewers screen width. With that said you need to set your font-size that is fit on initial and scroll state.

Thank you for understanding.

#7

That makes sense… Thanks for your detailed answer! :blush:

#8

You are welcome!