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

Store Design
,
1

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.

{% for link in linklists.eyebrow.links %} {{ link.title }} {% endfor %}
.c-menu2 { display: inline; }

@media (max-width: 989px) {
.c-menu2 {
flex-direction: inline;
align-items: center;
/*display: none; */
}
}

Grateful for any help!

2

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

}
3

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?

4

@eComInsider

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

5

for the mobile use

@media (max-width: 989px) {

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

}
6

To center it use:

@media (max-width: 989px) {

  .eyebrow {
    align-items: center;
  }

}
7

That worked! Thanks!