Align brand logo and menu items on desktop

[moosh44]

Hello,

My store is using the sense theme and it seems like on desktop my logo is not aligned with the desktop nav menu items.

How can I align the logo to be centered with the nav menu items.

This is my URL: https://movinfitness.com/

Example of what I mean, how can I make it more like the right?

Thanks in advance 🙂

[Anshul_arora]

Hello @moosh44 ,

I understand you are looking to align your logo with the navigation menu item.

Please take a look at below mentioned steps to properly align logo and navigation menu item.

1. Go to Online Store - Themes - Click Action (Three dots) - Edit Code.

2. Search for the base.css file (or .css file of your store), open it and look for " .header__heading-logo-wrapper " class code in the css file.

3. Next add margin-top property in this class .header__heading-logo-wrapper , similar as i mentioned in the screenshot https://prnt.sc/sfKzjq1lFw5L

.header__heading-logo-wrapper {
width: 100%;
margin-top: -10px;
display: inline-block;
transition: width .3s cubic-bezier(.52,0,.61,.99);
}

4. Save the changes

I hope the solution helps you.

Please let me know if you need any assistance.

Thank you.

[moosh44]

Thanks, this works well but it also changes the logo position on mobile too. Is there any way to make it only apply on desktop?

[Anshul_arora]

Hello @moosh44 ,

Yes, Please add the below mentioned code in your .css file. [Now, you do not need to add the previously shared code by me.]

a.header__heading-link.link.link--text.focus-inset {
padding-top: 0;
}

@media screen and (max-width: 540px) {
a.header__heading-link.link.link--text.focus-inset {
padding-top: 5px;
}
}

By adding the above mentioned code, the logo position of your store will perfectly work on both mobile or desktop versions.

If the solution helps you, kindly like and accept the solution.

Please feel free to share if you have any further query.

Thank you.