I've added an eyebrow menu - but need help with alignment and adding a button

[valholden02]

I’ve added a custom eyebrow menu to this Studio theme: https://financial-alchemy.myshopify.com/

Password: katie

There are 3 things I can’t figure out and would love advice!

1. Aligning the eyebrow menu with the search icon. IE: Having the final N in consultation right above the search icon.

2. Making Request Consultation into a button. I am also ok to add this separately vs styling the ‘last child’ option.

3. Reduce font size by about 25%.

Here is the code I used for the eyebrow menu:

<div class="eyebrow">
{% for link in linklists.eyebrow-menu.links %}
<a class="header__menu-item list-menu__item link link--text focus-inset" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</div>
<style>
.eyebrow {
display: flex;
justify-content: right;
}
.eyebrow__link {
margin-right: 50px;
}
</style>

Thank you for your consideration / help!

[Abdosamer]

Hi @valholden02 , Go to theme.liquid file and add the following code before the tag :

[Dan-From-Ryviu]

Hi @valholden02

You can do that by changing your code to this version.

{% for link in linklists.eyebrow-menu.links %}
{{ link.title }}
{% endfor %}

[mageplaza-cs]

@Hi @valholden02 ,

You often add the following CSS codes to the card of the following Eyebrow Menu code to solve the above problem:

.eyebrow a:last-child{
    background-color: rgb(255 255 255);
    color: #000;
    border-radius: 100px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.list-menu__item {
    font-size: 1.1rem !important;
}

Please let me know if it works as expected!

Best regards

[DaisyVo]

Hi @valholden02

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
.eyebrow {
    padding-inline: 6.5rem;
    padding-block: 10px;
}
.eyebrow * {
    font-size: 13px !important;
}
.eyebrow > a:last-child {
    background: #BC5631;
    border-radius: 50px;
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[valholden02]

This is fantastic. I didn’t specify in my original note that I wished the button to fill the bar (IE: no green above / below) and your code did exactly that.

Thank you! “Coffee” sent. I’m very grateful!

[valholden02]

Thank you so much for taking the time to answer! I went with another answer as the “solution” as it had subtle styling I liked.

I hope your answer will be helpful for others who wish to do the same and prefer this style option!

[Dan-From-Ryviu]

Thanks and very welcome!