How can I align the header to 1 line? Sense Theme

[TimD3]

I'm trying to make the header be all on 1 line instead of the cart/currency in the upper right and the logo above the menu options.

I'd like the logo in the center or to the left of all the menu options with the cart/currency on the same line on the right side.

Using Sense Theme.

Photo for reference, thank you.

[shahrozbabar5]

For a quick fix, you can use custom CSS to adjust the header layout in your Sense Theme. Here’s a simplified approach:

1. **Add Custom CSS**:

- Go to your Shopify admin panel.
- Navigate to `Online Store` > `Themes`.
- Click on `Customize` for your current theme.
- Click on `Theme settings` > `Custom CSS` (or you might find `Additional CSS`).

2. **Paste the Following CSS**:

/* Adjust header layout */
.header__inner {
display: flex;
justify-content: space-between;
align-items: center;
}

.header__logo {
flex: 1;
text-align: center; /* Center the logo */
}

.header__menu {
flex: 2;
text-align: center; /* Center the menu items */
}

.header__icons {
flex: 1;
text-align: right; /* Align icons to the right */
}

@media (max-width: 768px) {
.header__inner {
flex-direction: column;
align-items: center;
}
}
```

3. **Save and Preview**:

- Save the changes and preview your store to ensure the header elements are aligned as desired.

This CSS assumes the default classes used in the Sense Theme for header components. If the classes differ, you might need to inspect your header’s HTML structure (using browser developer tools) to adjust the class names accordingly.

let me know if it works

[TimD3]

nothing changed.

I copied from "/* Adjust header layout */" to "} }"

[shahrozbabar5]

please provide me store link so i can inspect

[TimD3]

https://thatthingtrending.com/

[shahrozbabar5]

do you know the coding stuff, I'll guide give you the code to use in your header.liquid file so you can modiy

[TimD3]

I know how to get to that area and find the correct file. I just need the code and where to put it

[BSSCommerce-B2B · Accepted solution]

Hi @TimD3 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.header {
    display: flex !important;
}
.header__icons.header__icons--localization.header-localization {
    padding-top: 10px !important;
}
.header__icons {
    flex-direction: row-reverse !important;
}

In this step, I make the logo in the left of all the menu options with the cart/currency on the same line on the right side.

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!