Hi there! I recently added my socials to the top header instead of the footer. This works perfectly and everything is in the top right hand corner of the header except for the search icon that for some reason is on the left of the header. I’m wanting all the icons to be on the right hand side so need to know what I must copy and paste in the code to fix this. I’ve attached a photo below for reference.
Thank you!
Hi [email removed]LivMor3
This is PageFly - Free Landing Page Builder. I would love to provide my for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.
Can you give me your website URL? I need to test it and then give you the solution
If there is a password please provide the password, thanks
If you want more flexibility to personalize your pages, I’d love to introduce our product PageFly Landing Page Builder with 24/7 support live chat. PageFly has a Free plan where you can use all features and create different page types so I hope give us a try.
If you find my comment useful, please let me know by giving it a Like. Thank you!
PageFly
Hi @LivMor3
you can add this code to the bottom of the file base.css
details-modal.header__search{
justify-self: icons !important;
justify-self: end !important;
margin-right: 16px;
}
Hi there! Thank you so much, this has gotten me on the right track. I’ve attached some pictures below so you can see. When I have the webpage viewed at full size it still seems to stay on the left but when I shrink the size of the webpage the search bar moves over to the right. I’m not sure how I further edit the code so it’s always on the right side? Thank you!
You can add the following code:
@media screen and (max-width: 990px){
summary.header__icon.header__icon–search.header__icon–summary{
position: absolute !important;
left: 10% !important;
}
}
Unfortunately for some reason this just kept it permanently on the left side not matter my resizing. Maybe there is something wrong with my original code?
you can give me url? and I will check it carefully
Yes this is the link to the preview of my website using the dawn theme as I have not published this version yet. Thanks.
Go to Online Store > Themes > Edit Code > base.css , after paste this code to bottom of file
@media(min-width:990px){
.header__icons{
width:320px !important
}
}
.header__icons details-modal{
display:block !important;
}
header>details-modal{
display:none !important
}
