Question about the product search button effect
-
Is there any way to adjust the ‘full screen’ part to look better? Right now, the font size is too big and the layout isn’t very nice. And is there any way for me to leave the search button like ‘full screen’ but when I click on the effect, it shows the search bar like ‘full screen 2’?
Best regards.
Attachments:
You must be
logged in to view attached files.
Hello,
It is not possible to use the button of ‘Full Screen’ or the search bar of ‘Full Screen 2’ together. However, you can adjust the font size to improve the layout. Please share the page URL, and I will provide you with a CSS code to customize it
Best Regards,
i’m following the design style of “apple”, i really like the effect of their search bar working, if possible in the future i hope you add more effects, for now please give me the css code to match the apple style as much as possible. thank you very much
Hello,
Please add below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS. change the values as per your requirements.
.wd-search-full-screen {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
transform: translate3d(0, -100%, 0);
width: 100%;
height: 50%;
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border-radius: 12px;
}
/* Adjusting form input */
.wd-search-full-screen .searchform {
padding: 10px;
border-bottom: none;
background: #b4b4c6;
border-radius: 8px;
}
.wd-search-full-screen .searchform input[type="text"] {
padding: 10px;
text-align: left;
font-size: 24px;
font-weight: normal;
}
.wd-search-full-screen .wd-close-search.wd-style-icon {
--wd-action-icon-size: 30px;
position: absolute;
top: 10px;
right: 10px;
}
.wd-search-full-screen.wd-opened {
transform: translate(-50%, 0);
transition: transform 0.5s ease-in-out;
}
Best Regards,
.
