Solved

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

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

Accepted Solutions (2)
LitExtension
Shopify Partner
4860 1001 1132

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
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

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;
}

 

View solution in original post

Replies 10 (10)

LitExtension
Shopify Partner
4860 1001 1132

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
Check out our Shopify migration app to migrate your online store to Shopify
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

LitExtension
Shopify Partner
4860 1001 1132

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
Check out our Shopify migration app to migrate your online store to Shopify
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

LitExtension
Shopify Partner
4860 1001 1132

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
Check out our Shopify migration app to migrate your online store to Shopify
themuddshop
Excursionist
16 1 3

THANK YOU for catching that! Appreciate all your help

Kinjaldavra
Shopify Partner
2302 570 1422

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;
}

 

themuddshop
Excursionist
16 1 3

Thank you so much!

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

themuddshop
Excursionist
16 1 3

One last inquiry @Kinjaldavra  

- Any suggestions for increasing the Link-list "container" width (only on Safari).
- The last link (HARMIN ©2021) drops below the other links, no matter the screen width.
- But again, this only happens in the Safari browser
Screen Shot 2021-03-19 at 4.13.09 PM.png

Any suggestions would be greatly appreciated. thank you