Solved

How to center logo and navigation menu

Diamond2
Explorer
63 0 20

I am using Empire theme and want to center my logo and navigation menu (I tried changing the px of the margin but then the logo kept changing places on different computers I was using). How can I center it?

Also how can I remove the space (padding) between my logo and announcement bar; and my logo and navigation menu. There's a lot of blank space.

Website URL - https://www.temporary-url.com/C47D1

Thank you!

Accepted Solution (1)
Wahab_Ahmad
Shopify Partner
773 114 199

This is an accepted solution.

@Diamond2,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

.site-navigation{
text-align:center;
}
ul.site-header-actions {
display:none !important;
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee

View solution in original post

Replies 13 (13)

dmwwebartisan
Shopify Partner
12267 2545 3688

Hey @Diamond2,

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.site-navigation .navmenu-depth-1{
width: 100%;
text-align: center;
}
@media screen and (min-width: 1024px) {
.site-header-main-content { margin-right: 0px !important}
}
@media screen and (max-width: 679px) {
.site-header-logo { margin: 0 auto }
}

Let me know if this works for you.

 

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Diamond2
Explorer
63 0 20

@dmwwebartisan Hi thank you for your help. It looks like the logo is now centered, but the navigation menu is not. Anyway to fix this?

Thanks I really appreciate the help!

Wahab_Ahmad
Shopify Partner
773 114 199

This is an accepted solution.

@Diamond2,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

.site-navigation{
text-align:center;
}
ul.site-header-actions {
display:none !important;
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
Diamond2
Explorer
63 0 20

@Wahab_Ahmad Thank you so much! Worked perfectly!!

dripbros
New Member
4 0 0

I am using venture theme and tried using this solution but it didnt make a difference

Wahab_Ahmad
Shopify Partner
773 114 199

Hello @dripbros, share store link? 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
dripbros
New Member
4 0 0

HI,

I was using venture, but then switched to debut.
 store link: 
https://fkjbnc225sm2ucnu-48391848086.shopifypreview.com

ImaneMak
Visitor
1 0 0

Hi @Wahab_Ahmad 

I hope you are well! 

I use the theme Dawn and Can't find theme.scss in the asset section. I would like to center logos in Logo list. Can you please help me ?

Wahab_Ahmad
Shopify Partner
773 114 199

Hi @ImaneMak,

Kinldy share store link with protected password. 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
markgbd
Visitor
1 0 0

Hi, I hope you're well! 

 

I'm also using Dawn, and can't seem to find the theme.scss file. Do you mind giving me a hand please my friend?

 

Thanks 🙂

salmansillc
New Member
9 0 0

I have the same problem. I want to show my logo and menu bar in a single line in my header. My theme is enterprise. https://homelifecompany.com/

NeginA
Shopify Partner
51 0 4

Hi! 

I tried this for the Charge shopify theme and it didn't work. Your help will be greatly appreciated! 🙂 I need to center my logo and move header fully above logo rather than under

Wahab_Ahmad
Shopify Partner
773 114 199

Hello @Diamond2, change your with logo with this logo through theme customization. It will remove white space

logo (2).png 

If it is useful marks as like and accept solution

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee