Responsive navbar

[Hugoboss]

Hi,

I have created a left header with navbar in Pro, one Inline navbar for large screen size and a dropdown for mobile.
My issue is that using screens with less height, the end of the menu is not visible.

Is there any way I can auto shrink the text or something like that?

[lely]

Hello There,

We can adjust it on the header builder. Select the navigation inline element. Under Top Links Tab > Padding decrease top and bottom padding. Default value is .75em. Replace with smaller value:

Hope this helps.

[Hugoboss]

Hi,

Thanks, that solves the problem.
However it shrinks the whole menu for all sizes, is there no way to make it responsive? Would I have to create another menu for different screen sizes?

Can you please advise how I can align the navbar in the center of the header? When viewed on large screen the menu is at the top of the page and there is a lot of space beneath it.

[jumar]

Hello there,

@Hugobosss

Hi,

Thanks, that solves the problem.
However it shrinks the whole menu for all sizes, is there no way to make it responsive? Would I have to create another menu for different screen sizes?

Sorry, I’m confused. Can you clarify what you meant by responsiveness on your terms?

In web design, responsiveness is an approach that suggests making your web page look good on all devices (desktops, tablets, and phones).

The mobile menu you see right now on the image below pertains that you’re already implementing responsivness on your website.

I think what you meant, is that your mobile menu is showing on almost all screen resolution. Is that right?

If yes, I can confirm this and can see you’re mobile menu is showing on a tablet device (landscape and below) breakpoints. I suggest you update it to the following setting it as it doesn’t look good design-wise:

@Hugobosss

Can you please advise how I can align the navbar in the center of the header? When viewed on large screen the menu is at the top of the page and there is a lot of space beneath it.

You need to increase padding top in the Top Links Tab > Padding to 6.0em, but still retain padding bottom to .75em. Don’t forget to click Unlinked option before updating paddings.

Hope this helps.

[Hugoboss]

Hi,

When checking the screen size in the Preview everything looks wrong for some reason, I need to use another website to check the screen sizes:
http://quirktools.com/screenfly/

when using this tool, the mobile menu looks fine. On smaller sizes, mobile menu is used and on larger (kindle fire 1024x600) the left menu appears, is it not OK?

Increasing padding helped with the other issue.

Tack!

[paul.r]

Hi,

That is totally fine as long as you can see all of the menus.

Thanks