Hi, i need to move the buy with prime button over next to my other headers.
https://envoyleather.com/ (Debut theme) I would like to put it next to the ‘Tool Bags’ header.
I put in some code into the header.liquid file. just need to move it over to the left a little bit.
Hi @NateOldham
You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css
@media(min-width: 750px) {
.site-header .site-header__mobile-nav {
display: flex;
align-items: center;
}
.site-header #AccessibleNav {
width: auto!important;
}
.site-header .site-header__icons-wrapper button.btn {
margin-left: auto;
}
}
Hi @ExpertRookie , it moved the buy with prime button over a little, however it also pulled the search bar and cart button along with it.
HI @NateOldham
So sorry, my mistake in the code
please try to add this
@media(min-width: 750px) {
.site-header .site-header__mobile-nav {
display: flex;
align-items: center;
}
.site-header #AccessibleNav {
width: auto!important;
}
.site-header .site-header__icons-wrapper > button.btn {
margin-right: auto;
}
}
Hey, @ExpertRookie thank you so much for your help. I just need a few more things and it will be perfect. My shopify header has the prime button in the perfect place. that part is amazing. however, the whole header is now shifted over to the left and not centered anymore. Also, the search bar and cart icon is also shifter over towards the center.
it would be amazing if the whole header could be aligned in the center and the search bar and cart could be all the way on the right side like the example below. thanks so much
You can replace the code above with this code.
@media(min-width: 750px) {
.site-header .site-header__mobile-nav {
display: flex;
align-items: center;
justify-content: center;
}
.site-header #AccessibleNav {
width: auto!important;
}
.site-header .site-header__icons-wrapper button.btn {
margin-left: auto;
}
}