Shopify themes, liquid, logos, and UX
Hello - I currently use the Craft theme for my online store. I've aligned a lot of the website, and the last piece is my header. I have 4 menu options, and they are aligned with themselves (spacing is correct, etc.) but they are not aligned with the website. They are a few pixels off from being in the accurate middle of the screen.
I'm looking for a way to add padding or margin to my menu to just push all 4 menu options a little bit to the right so that it looks even.
Any help would be greatly appreciated!
And a happy new year 🙂
Solved! Go to the solution
This is an accepted solution.
As far as I checked in DevTools, the element containing 4 menu options has the justify-self: center property. This property will help the element be centered.
But if you still want to adjust the position of this element, you can do the following:
In Online store, select Themes -> ... -> Edit code
In base.css, add the following code at the end of the file:
@media screen and (min-width: 990px) { .header--top-center .header__inline-menu { padding-left: 1px; } }
or the following code:
@media screen and (min-width: 990px) { .header--top-center .header__inline-menu { margin-left: 1px; } }
You can use 1px or any number you want
Click Save to save changes.
Hope my answer helps you.
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Hi! It is auspiciousgarments.com and password is ag2023
Hi @ag2023 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Hi! auspiciousgarments.com and password is ag2023
This is an accepted solution.
As far as I checked in DevTools, the element containing 4 menu options has the justify-self: center property. This property will help the element be centered.
But if you still want to adjust the position of this element, you can do the following:
In Online store, select Themes -> ... -> Edit code
In base.css, add the following code at the end of the file:
@media screen and (min-width: 990px) { .header--top-center .header__inline-menu { padding-left: 1px; } }
or the following code:
@media screen and (min-width: 990px) { .header--top-center .header__inline-menu { margin-left: 1px; } }
You can use 1px or any number you want
Click Save to save changes.
Hope my answer helps you.
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025