Navigation menu items too close to center

Solved
Stasja
Tourist
7 0 2

Hello!

 

I've been trying to find the code for this but can't locate it, not even with the 'inspect item' option as it doesn't show that in the css. I'm very new at all this so might be an easy find.

 

This is our website:

www.hellogulp.com

 

I'd like to get the menu items and the account / cart icons closer to the left and right side. They are too far in the center now. Any help would be very very welcome!

 

Thanks a million!

0 Likes
.large--text-right {
    text-align: center !important;
}
.large--text-left {
    text-align: center !important;
}

Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->timber.scss.liquid

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
dmwwebartisan
Shopify Partner
4445 999 1273

@Stasja 

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file

.large--text-right {
    text-align: center !important;
}
.large--text-left {
    text-align: center !important;
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
dmwwebartisan
Shopify Partner
4445 999 1273

@Stasja 

You can use the above code or try to use the following code. Let me know which one works.

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

 

.site-header .wrapper{
max-width: 100% !important;
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Stasja
Tourist
7 0 2

Thank you so so much! It worked One more question - my logo doesn't seem to be in the middle, do you know how to fix this? I'd be super grateful!

dmwwebartisan
Shopify Partner
4445 999 1273

@Stasja 

Please add the following code to make the logo in the center.

@media screen and (min-width: 769px){
.site-header__logo {width: 100%;}
}

 

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Stasja
Tourist
7 0 2

Brilliant! Thank you! Is there also a way to reduce the padding above the nav menu? 

0 Likes
dmwwebartisan
Shopify Partner
4445 999 1273

@Stasja 

The navigation above padding is looking fine. But could you please provide a screenshot?

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Stasja
Tourist
7 0 2

Screen Shot 2021-02-19 at 14.17.23.png

Might just look like that because of the picture. I was thinking just reducing the tiniest bit but if you think it looks fine, then maybe I should leave it.

dmwwebartisan
Shopify Partner
4445 999 1273

@Stasja 

Do you want to reduce this padding? 

reduce-padding.jpg

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes