Elements in header change positions on smaller screen

Hey!

After lots of struggling to make the header elements behave correctly, a friend found out that they change their behaviour when the screen is smaller than a certain value or if I zoom in (depending on the browser). I want the menu and the tagline on the same line, if possible at the same distance from the top and bottom of the header, and I think he managed to do it with this:

.navbar .navbar-inner {
margin: 32px 0 0 0;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
}

… but then he wasn’t sure where to look for the instance when the screen is smaller.

You could check the difference if you zoom in/out here: https://traveleyes.net The site is in Bulgarian, but to the right side of the header you can see the tagline “Пътешествувай с Лана и Лъч”, and more to the center is the menu.

If you have any ideas on how to fix that issue, please don’t hesitate to comment! ??

Thank you!
Lachezar

The page I need help with: [log in to see the link]