How to align navigation menu/bar to the bottom edge of header,

I would like to align navigation menu/bar to the bottom edge of my header, so it`s bottom line is on same line with the bottom line of the logo. First I did it in css with margin:
.navbar-nav>li>a {
margin-top: 85px;
margin-bottom: 5px;
}
Everything was ok in desktop mode but in mobile things got ugly, there was huge space between every menu item when opening the toggle menu. Could you advice what would be the right way to do it?
Thank you in advance!

Have you tried adding additional styling for mobile? Since you got it working on desktop, you can simply copy that same code into an @media bracket and then make any required adjustments to make it display properly in mobile as well.

For example:

.navbar-nav>li>a {
margin-top: 85px;
margin-bottom: 5px;
}

@media (max-width: 768px) {
.navbar-nav>li>a {
margin-top: 0px;
margin-bottom: 5px;
}
}

Thanks, it worked with media queries well!

Hi @krisbap,

I hope you are well today and thanks for helping out here in this forum.

Your help here is really appreciated.

Thanks,
Movin