Need help centering the header menu (studio theme)

naximov
Tourist
8 0 2

Hi,

 

I need to center the header menu, which appears misaligned to the announcement bar. Other solutions published here don't appear to work.

 

Any tips would be appreciated!

 

https://7dfb70-3.myshopify.com/ 

Replies 6 (6)

websensepro
Shopify Partner
873 117 126

Hi, @naximov.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

 

.header {
    column-gap: 13rem !important;
}

Result:

websensepro_0-1704291208163.png

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

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
naximov
Tourist
8 0 2

thanks, that did it!

 

Just noticed that the announcement bar is overlapping with the header on mobile - any suggestions on fixing it?

 

naximov_0-1704204775276.png

 

websensepro
Shopify Partner
873 117 126

Hi, @naximov.

Paste these Css on Mobile.

@media (min-width: 320px) and (max-width: 767px) {


.utility-bar.color-inverse.gradient.utility-bar--bottom-border {
    position: static !important;
    height: 9rem !important;
}

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social {margin-top: 0px !important;}

}

Result:

websensepro_0-1704295121646.png

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

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
naximov
Tourist
8 0 2

thank you - this fixed the overlap but the announcement bar now gets hidden on mobile on scroll. I want to to remain sticky and always visible on desktop and mobile. Any thoughts?

Moeed
Shopify Partner
3576 899 1119

Hey @naximov 

 

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>
@media screen and (min-width: 768px) {
.header--middle-left {
    column-gap: 14rem !important;
}
}
</style>

RESULT:

Moeed_0-1704201309298.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

ZestardTech
Shopify Expert
5385 970 1294

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.header {
justify-content: space-between;
display: flex;
}

 

ZestardTech_0-1704201645130.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing