Remove Columns from Navigation in Canopy 1.0.2

LandBLife
Tourist
7 0 3

Hello all,

My website only needs 4 columns in the 'Shop' drop-down menu in the Navigation bar, but the theme insists on having 6 columns. So now I have an awkward amount of space on the right side where there would be 2 other columns. Is there any code I can change or code I can add to 'main-navigation.liquid' to remove these empty columns? Any help is appreciated. Here is what my website looks like: https://landblife.com/

I am using Canopy 1.0.2 as my theme. The apps I'm using are Bold Custom Pricing-Wholesale; Collection Import Export; Order Printer; Order Printer Templates; Store Pickup Click and Collect; Wipeout; Yotpo Photo & Product Reviews.

Thank you,
L&B Life

KetanKumar
Shopify Partner
18589 1954 6863

@LandBLife 

do you mean like this?

KetanKumar_0-1620981776469.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LandBLife
Tourist
7 0 3
Yes, how did you do that???
0 Likes
KetanKumar
Shopify Partner
18589 1954 6863

@LandBLife 

thanks for confirm please add this code

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

.main-nav .sub-nav {text-align: center;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LandBLife
Tourist
7 0 3

That doesn't really solve the problem. Even if I center align the navigation, it still leans to the left because there are two empty columns on the right. What I need is for the 4 columns to take up the entire width by deleting the 2 empty columns on the right. Take a look at my theme settings page here:

LandBLife_0-1621438303351.png

Basically I have these 2 empty columns and as you can see it shifts everything to the left. I need the navigation to take up the whole space rather than just the left. I need to delete these two columns, but how do I do that? Every time I change the CSS in styles.scss.liquid of the code that should affect how wide the columns are or the number of columns does nothing. There must be somewhere else where I can completely erase the data for these 2 empty columns and not just change the CSS/design. Any ideas?

KetanKumar
Shopify Partner
18589 1954 6863

@LandBLife 

oh see please add this code your css file at the bottom

.main-nav .sub-nav {
    text-align: center !important;
}

After Code view

KetanKumar_0-1621440208255.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LandBLife
Tourist
7 0 3

That's not what I'm asking for either, but it's not that big of a deal anyways. Thanks for attempting to help, Ketan! I'm just gonna keep it the way it is for now.

KetanKumar
Shopify Partner
18589 1954 6863

@LandBLife 

no rush great Thanks for update 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes