Search Icon Placed Differently from Main Help Site to Search Results
Here is my code.
/***** Search field *****/
.search {
position: relative;
}
.search input[type="search"] {
border: 1px solid #ddd;
border-radius: 30px;
box-sizing: border-box;
color: #01B5B1;
height: 40px;
padding-left: 40px;
padding-right: 20px;
-webkit-appearance: none;
width: 75%;
}
[dir="rtl"] .search input[type="search"] {
padding-right: 40px;
padding-left: 20px;
}
.search input[type="search"]:focus {
border: 1px solid $brand_color;
color: #01B5B1;
}
.search-full input[type="search"] {
border: 1px solid #01B5B1;
}
.search-icon {
position: relative;
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 90px;
z-index: 1;
width: 18px;
height: 18px;
color: #777;
}
[dir="rtl"] .search-icon {
right: auto;
left: auto;
}
Here is where it's landing on both pages and I have no clue how to get them to both be on the left side of the search bar.
-
Hey Kristal Offutt, you need to change the left space:
Current - left:90px:
.search-icon {
position: relative;
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 90px;
z-index: 1;
width: 18px;
height: 18px;
color: #777;
}It would be left:15px :
.search-icon {
position: relative;
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 15px;
z-index: 1;
width: 18px;
height: 18px;
color: #777;
}If any issue, you can share your pubic help center URL here, so I can share the exact solution for you.
Thanks
Team Diziana
-
Hi ifra,
Thank you for the quick reply! When I change that to 15 then it changes the search icon on the main page to be outside of the search bar. I did shorten the search bar to 75% as it was taking up too much of the space.
URL: support.pinwheel.com
-
Okay, so don't change 90px to 15px, only copy the below CSS and paste it at style.css file.
.sub-nav .search-icon {
left:15px
}
-
You're amazing! Thank you so much!
-
:)
Por favor, entrar para comentar.
5 Comentários