How can I center my mega menu in the Craft theme?

Solved

How can I center my mega menu in the Craft theme?

ag2023
Tourist
4 0 0

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 🙂

Accepted Solution (1)
BSS-Commerce
Shopify Partner
3477 464 551

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.

view - 2024-01-03T142815.831.png

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 

view - 2024-01-03T142955.395.png

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


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 5 (5)

Abdosamer
Shopify Partner
956 173 202

Hi @ag2023 , can you share your store url?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
ag2023
Tourist
4 0 0

Hi! It is auspiciousgarments.com and password is ag2023

BSS-Commerce
Shopify Partner
3477 464 551

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


BSS Commerce - Full-service eCommerce Agency
ag2023
Tourist
4 0 0

Hi! auspiciousgarments.com and password is ag2023

 

BSS-Commerce
Shopify Partner
3477 464 551

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.

view - 2024-01-03T142815.831.png

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 

view - 2024-01-03T142955.395.png

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


BSS Commerce - Full-service eCommerce Agency