How can I alter the main menu position in the Sense theme?

Store Design
1

Hello,

The Sense theme has 3 logo/menu positioning options by default. However, the main menu positioning does not suit me. I would like to keep my logo position centred while moving the main menu items to where the current search icon is, and moving the search icon to the right (next to the shopping bag/cart icon).

Here’s the webpage for reference: https://test-6806.myshopify.com/

password to enter webpage is: rabrah

Is there anyway I could do that?

Any help/suggestions would be greatly appreciated!

1 Like
2

@Test59

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 990px) {
.header--top-center *>.header__search {
    display: inline-flex;
}
.header--top-center>.header__search {
    display: none;
}
header.header.header--top-center.page-width.header--has-menu {
    position: relative;
}
nav.header__inline-menu {
    position: absolute;
    left: 0;
    top: -40px;
    margin-top: 0 !important;
}
}

Please confirm this look

KetanKumar_0-1654660155235.png
KetanKumar_0-1654660155235.png1920×1080 448 KB

1 Like
3

Hi @Test59 ,

With KetanKumar instructions it will work fine when you don’t upload the logo, if you want the change to always work fine you can follow this instruction:

  • Step 1: Change ‘Desktop logo position’ to ‘Middle left’.

Screenshot.png
Screenshot.png349×556 10.7 KB

  • Step 2: Go to Assets > base.css and paste this at the bottom of the file:
@media screen and (min-width: 990px) {
	.header--middle-left {
		grid-template-areas: "navigation heading icons" !important;
		grid-template-columns: 1fr 1fr 1fr !important;
	}
	.header__heading {
		justify-self: center !important;
	}
}

Hope it helps!

1 Like
4

Hello @KetanKumar

Thank you so much for your response! your solution works! here’s a screenshot of what the webpage looks like using an image logo

answer 1.png
answer 1.png1344×518 99.8 KB

1 Like
5

Hello @LitCommerce

Thanks a lot for your input, appreciate your help! your solution also works! here’s screenshot of what the webpage looks like with an image logo.

answer 2.png
answer 2.png1343×520 96.1 KB

I think the only difference between your solution and @KetanKumar solution is the alignment of main menu items with search and cart icons, as well as the header bottom margin difference between the solutions.

1 Like
6

@Test59

its my pleasure to help us