Align brand logo and menu items on desktop

moosh44
Excursionist
36 0 0

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?

moosh44_0-1698967469140.png

 

Thanks in advance 🙂

Replies 3 (3)
Anshul_arora
Trailblazer
132 28 12

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.

Anshul
moosh44
Excursionist
36 0 0

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
Trailblazer
132 28 12

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.

Anshul