Shopify themes, liquid, logos, and UX
Hi there!
I have **Almost** accomplished adding a secondary menu to my Craft theme.
But the nav items are appearing in a column, not a row.
Here is my site: https://valholden.myshopify.com/
And here is the code I added. Can anyone help tell me what to add to style it? And should the additional code be added in the Custom Liquid section or the Code? I haven't added anything to the site code, which may be the problem.
<div class="eyebrow">
{% for link in linklists.eyebrow.links %}
<a class="header__menu-item list-menu__item link link--text focus-inset" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</div>
<style>
.c-menu2 {
display: inline;
}
@media (max-width: 989px) {
.c-menu2 {
flex-direction: inline;
align-items: center;
/*display: none; */
}
}
</style>
Grateful for any help!
Solved! Go to the solution
This is an accepted solution.
Try this style :
/* Styles */
.eyebrow {
display: flex;
align-items: center;
}
.eyebrow__link {
margin-right: 10px;
}
@media (max-width: 989px) {
.eyebrow {
flex-direction: column;
align-items: flex-start;
}
}
This is an accepted solution.
Try this style :
/* Styles */
.eyebrow {
display: flex;
align-items: center;
}
.eyebrow__link {
margin-right: 10px;
}
@media (max-width: 989px) {
.eyebrow {
flex-direction: column;
align-items: flex-start;
}
}
That worked! Thank you so much!
Is there an easy way to make it either center or align on the right side of the site?
Shoot. It looks great on desktop, but still stacked on mobile. Any hints?
for the mobile use
@media (max-width: 989px) {
.eyebrow {
justify-content: center;
}
.eyebrow__link {
margin: 0 5px;
}
}
That worked! Thanks!
To center it use:
@media (max-width: 989px) {
.eyebrow {
align-items: center;
}
}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025