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 </body> tag :

<style>
@media(min-width:900px){

header.header.page-width{
  max-width:unset !important;
}
header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social{
  padding-right:0 !important

 }
}

.eyebrow a:last-child{
    background-color: #fff;
    color: #000;
    border-radius: 999px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.list-menu__item {
   
    font-size: 1.3rem !important;
}
</style>

[Dan-From-Ryviu · Accepted solution]

Hi @valholden02 

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

<div class="eyebrow page-width">
{% 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 .list-menu__item { 
font-size: 1.2rem; 
}
.eyebrow .list-menu__item[href="/pages/contact"] {
    padding: 8px 20px;
    background-image: linear-gradient(164deg, rgba(188, 86, 49, 1), rgba(188, 86, 49, 1) 100%);
    border-radius: 30px;
    color: #ffffff !important;
    /* font-size: 15px !important; */
    text-decoration: none;
    cursor: pointer;
    text-shadow: none;
}
.eyebrow__link {
margin-right: 50px;
}
</style>

[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! 

[Dan-From-Ryviu]

Thanks and very welcome!

[mageplaza-cs]

@Hi @valholden02 ,

You often add the following CSS codes to the <style> 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

[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! 

[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 </head> tag and add the following code above </head> 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.