Solved

Adding Second Menu ("Eyebrow" Menu) above Logo / Main Nav in Craft Theme - almost there!

valholden02
Shopify Partner
7 0 0

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! 

Accepted Solution (1)

eComInsider
Shopify Partner
160 16 37

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

}

➡️ Exclusive offer - Shopify Trial at $1/month


➡️ Shopify Blogs (Q&A)

➡️ Your;Coffee Tip: my code = a perfect blend!

View solution in original post

Replies 6 (6)

eComInsider
Shopify Partner
160 16 37

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

}

➡️ Exclusive offer - Shopify Trial at $1/month


➡️ Shopify Blogs (Q&A)

➡️ Your;Coffee Tip: my code = a perfect blend!
valholden02
Shopify Partner
7 0 0

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? 

valholden02
Shopify Partner
7 0 0

@eComInsider 

Shoot. It looks great on desktop, but still stacked on mobile. Any hints? 

eComInsider
Shopify Partner
160 16 37

for the mobile use 

@media (max-width: 989px) {

  .eyebrow {
    justify-content: center; 
  }
  
  .eyebrow__link {
    margin: 0 5px;
  }

}

➡️ Exclusive offer - Shopify Trial at $1/month


➡️ Shopify Blogs (Q&A)

➡️ Your;Coffee Tip: my code = a perfect blend!
valholden02
Shopify Partner
7 0 0

That worked! Thanks! 

eComInsider
Shopify Partner
160 16 37

To center it use: 

@media (max-width: 989px) {

  .eyebrow {
    align-items: center;
  }

}

➡️ Exclusive offer - Shopify Trial at $1/month


➡️ Shopify Blogs (Q&A)

➡️ Your;Coffee Tip: my code = a perfect blend!