Aligning navigation to logo

Could you please tell me how I can align the menu on the right hand side of the nav bar to be inline with the logo on the right?

I am assuming it is something to do with the padding but I’ve not been able to figure it out.

My current CSS case is below. (this has been borrowed from your other support answers!)

Thanks very much.

.site-logo {
max-width: 200px;
position: relative;
}
.site-branding {
padding: 5px 15px;
}
.main-navigation li {
padding: 15px 10px;
}
@media screen and (min-width: 992px) {
.is-sticky .main-navigation li {
padding: 15px 10px;
}
.is-sticky .site-branding {
padding: 5px 15px;
}

Can I see a link to your website please so I can understand what you mean by align?

yes - sorry about that.

Still no link :slight_smile:

Sorry Vlad.

joept.com

Alright, I’m not sure I understand how are you trying to align it. You want to move the menu up at the same level with the logo? Or you want to center it vertically in the menu bar? I’m going to assume you want to center it because it won’t make much sense in aligning it at the top:


.main-navigation li {
   padding: 35px 10px;
}
@media screen and (min-width: 992px) {
.is-sticky .main-navigation li {
   padding: 35px 10px;
}
}

Also, you can change you social widget to the Moesia FP: Social. The one you’re using is for the sidebar.

Worked perfectly - thanks!