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

[the_mudd_shop]

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.

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!

[LitExtension]

Hi @the_mudd_shop ,

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:

• So you can style like this:

.Linklist–header .Linklist__Item {}

.Linklist–footer .Linklist__Item {}

Hope this helps!

[the_mudd_shop]

Appreciate your reply!

This however, is a bit outside my Liquid wheelhouse.

Where do I insert the

within the footer.liquid?

[LitExtension]

Hi @the_mudd_shop ,

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!

[the_mudd_shop]

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]

Hi @the_mudd_shop , 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!

[the_mudd_shop]

THANK YOU for catching that! Appreciate all your help

[Kinjaldavra]

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

[the_mudd_shop]

Thank you so much!

[the_mudd_shop]

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

[the_mudd_shop]

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

Any suggestions would be greatly appreciated. thank you