Hi together,
Is it possible to add a button inside the header of the focal theme and make it customizable?
I want to add a button code inside the header.liquid to be able to have the control over the link and text in the editor like with the code example bellow.
{%- if block.settings.button_text != blank -%}
<div class="button-wrapper">
<a href="{{ block.settings.button_link }}" class="button button--primary">{{ block.settings.button_text }}</a>
</div>
{%- endif -%}
</div>
</header>
And this one:
{
"type": "text",
"id": "button_text",
"label": "Button text"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
This code example doesn’t work for the header.
The button has to be placed on the right side of the header menu.
My Shop: https://dev-stschuele.myshopify.com/?_ab=0&_fd=0&_sc=1
Password: sitwao
Think you!
Hello @Dev-Steve
I checked your store and may be you placed HTML code inside the header.liquid wrong placed because as I see schema is written correct but problem is related to header.liquid
so if you can share access with me I can help you on it.
1 Like
Hello @niraj_patel
Thanks for your reply! I can’t share the store access with you cause I’m only the developer. But I can Share the header.liquid file with you.
The file: https://www.dropbox.com/s/jsoakbk9660vzdp/header.liquid?dl=0
I hope this works too.
Thank you for your help.
1 Like
Hello @Dev-Steve
Not an issue I got your file and edit some code inside that.
Please download this new header.liquid file and replace it on the theme.
https://we.tl/t-Fpdtbpi1Fr
Let me know any issue you facing there.
1 Like
hello @niraj_patel
thank you. After replacing the code I got this error message:
Hello @Dev-Steve
i apologies sent broken file and not saved at my end.
Please use this one onstead and replace the code.
https://we.tl/t-JkMStIgr9v
Thanks! I figured it already out by my self. It was the “default” Tag at the end of the button_link.
Now it works!!
One last thing: between the viewport 1400px and 1200px, the button shrinks really bad. is it possible to force the header menu to shrink?
And hiding the button on mobile (749px) would be great!
thank you!
1 Like
Hello @Dev-Steve
Please open the file Assets → theme.css and paste the following code at the bottom of file and preview the store.
@media only screen and (min-width: 1200px) and (max-width: 1450px) {
.header__logo {
max-width: 180px !important;
}
.header__inline-navigation {
margin-left: 0 !important;
}
.header__linklist-item:not(:last-child) {
margin-right: 15px !important;
}
.header__secondary-links a.button{
padding-left: 10px !important;
padding-right: 10px !important;
}
}
@media only screen and (max-width: 749px){
.header__secondary-links a.button{
display:none !important;
}
}
1 Like
