Vertically Align Items in Navbar

[guybower1]

hi
I have menus, logo and a button I created in my navbar and I would like to make sure they are always aligned in the centre vertically. The navbar options only allow for px settings, but how will this work through various screen sizes?

Is it not possible to lock those into centred vertical positions through any screen size, or must it be trial and error using the pixel setting in Theme Options?

Obviously on mobile devices, things will change, but through XL, LG and possibly even MD, the look will remain constant.

The navbar button has the usual x-btn class and I currently have it positioned with margin-top: -12%; and it seems to be OK.

Thanks for your help

[albrecht]

Hi @guybower1,

Thanks for writing in. The solution you used is great, if you want to make it fixed vertically centered without updating codes each time you add an element, you might want to check these other solutions here https://vanseodesign.com/css/vertical-centering/. If you want more flexibility in your header or your footer you might want to check the header and footer builder that are available on our Pro Theme. https://theme.co/docs/header-footer-overview

Hope it helps.

[guybower1]

Hi Albrecht

Thanks so much for your reply.

A great article on vertical centering, so thanks for that link.

As to using the header builder in Pro, this was an installed theme from your Design Cloud area, so the navbar was already created.

Thanks again

[jade]

You’re most welcome, @guybower1.