Left-Center Header Menu SENSE THEME **HELP**

[RahbarAli150]

My online store has the sense free theme installed on it and I would like to keep my logo centered (where it is) and move the header menu on the left side (left-centered), can anyone help me?

MY STORE WEBSITE: www.gadgetpods.store  PASSWORD: 110

[Moeed · Accepted solution]

Hey @RahbarAli150 

Is this what you mean? If yes then,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
nav.header__inline-menu {
    width: 100% !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[RahbarAli150]

Hey there this works, also how would I remove the search icon?

[Moeed]

Hey @RahbarAli150 

Keep the previous code and add this new code above </style> in the end of theme.liquid file.

.header__search {
    display: none !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[RahbarAli150]

Okay But How Do I Align The Header Menu With The Logo? Because it is in the bottom and I want it aligned with the logo

[rajweb]

Hey @RahbarAli150 ,

To adjust the layout of your header in the Sense theme, follow these steps:

1. Online Store 

2. Themes 

3. Edit Code.

4. Adjust Header Layout in CSS:

-Locate the header.liquid  file in Sections and open it.

-Find the logo and navigation menu code. If they’re both wrapped in the same container, separate them into distinct containers if not already separated.

-Now, go to Assets and open the base.css or theme.css file (depending on your theme’s naming convention).

4. Add Custom CSS:

Add the following CSS at the end of the CSS file to adjust the layout:

/* Center the logo */
.header__logo {
    text-align: center;
    width: 100%;
}

/* Move the navigation to the left */
.header__menu {
    position: absolute;
    left: 10px;
    transform: translateY(-50%);
}

/* Ensure the header remains properly spaced */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

Preview the store to ensure the logo is centered and the menu aligns to the left.

If you still encounter issues or need further customization, feel free to ask!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[RahbarAli150]

how do I remove the search Icon? As I do not need it and it looks weird when the menu is down and the logo is up