INLINE (horizontal) Footer Navigation customization impacting Header navigation (Prestige theme)

Solved
themuddshop
Excursionist
16 1 3

Store link: https://harminharmin.myshopify.com

Issue: When customizing the footer navigation Linklist (to display horizontally/inline) the code added (see below) is also impacting the main navigation.

Screen Shot 2021-03-11 at 11 (2).png

 

 

 

 

 

 

 

 


Code
modification attempted (in both footer.liquid & theme.css)

.Linklist__Item {
  display: inline !important;

  padding-right: 30px;
}

Goals:
Footer Linklist: display inline/horizontal and centered on desktop & tablet
Main/Header Navigation: display inline-block / block

Any help would be greatly appreciated!


Screen Shot 2021-03-11 at 11.png

Screen Shot 2021-03-11 at 11.35.00 AM.png

0 Likes
LitExtension
Shopify Partner
1228 157 217

Hi @themuddshop

I saw you're using the same markup for the navigation link list. In this case, i suggest you should add a class modifier (you should use BEM) to add a class on the link list on the header/footer to easy style.

Example:

<ul class="Linklist Linklist--header">

  <li class="Linklist__Item"></li>

</ul>

 

<ul class="Linklist Linklist--footer">

  <li class="Linklist__Item"></li>

</ul>

- So you can style like this:

.Linklist--header .Linklist__Item {}

.Linklist--footer .Linklist__Item {}

Hope this helps! 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
themuddshop
Excursionist
16 1 3

Appreciate your reply!

This however, is a bit outside my Liquid wheelhouse.

Where do I insert the <ul class="Linklist Linklist--footer"> within the footer.liquid?

Screen Shot 2021-03-13 at 2.22.29 PM.png

0 Likes
LitExtension
Shopify Partner
1228 157 217

Hi @themuddshop

You just add this class "Linklist Linklist--footer" in the footer.liquid file.
Please take a look at our screenshot here: https://prnt.sc/10luqq7

- When you add that class, you can open "theme.scss.liquid" file and style.
Example: .Linklist--footer .Linklist__Item {display: inline;}

Hope this helps! Have a great week! 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
themuddshop
Excursionist
16 1 3

Thanks for your help @LitExtension 

I replaced the Linklist Linklist--footer

Unfortunately all CSS mods are having no impact on the footer links

Any other suggestions, would be appreciated.

Thanks

0 Likes
LitExtension
Shopify Partner
1228 157 217

This is an accepted solution.

Hi @themuddshop, can you put all your "li" tags in "ul" tag as this screenshot: https://prnt.sc/10m0ber ? 

Please take a look at this screenshot, I have tested this and this is what it looks: https://prntscr.com/10m0rna

Hope it helps! 

 

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
themuddshop
Excursionist
16 1 3

THANK YOU for catching that! Appreciate all your help

0 Likes
Natztech
Shopify Partner
1385 389 943

This is an accepted solution.

 

.Footer__Inner
{
    width: 100% !important;
    margin: 0 auto;
}

.Footer__Block{
    justify-content: center !important;
    width: 100% !important;
    display: flex !important;
}

.Footer__Block--links{
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;

}
  .Linklist--footer{
    text-align: -webkit-center !important;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
themuddshop
Excursionist
16 1 3

Thank you so much!

0 Likes
themuddshop
Excursionist
16 1 3

Anyway to amend the social link/icon (.Footer__Block--text) from jumping above the footer on mobile?

Photo Mar 16, 9 48 32 AM.jpg

0 Likes