Liquid, JavaScript, themes, sales channels
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!
Solved! Go to the solution
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!
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;
}
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!
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?
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!
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
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!
THANK YOU for catching that! Appreciate all your help
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;
}
Thank you so much!
Anyway to amend the social link/icon (.Footer__Block--text) from jumping above the footer on mobile?
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024