- This topic has 20 replies, 2 voices, and was last updated 3 years, 6 months ago by
Leo.
-
AuthorPosts
-
April 3, 2019 at 1:07 pm #858745
David
Hi Tom and Team,
Is it possible to change the search bar to something like this? With the white arrow at the top? And text below the placeholder?
(Also can you change the color of the font as it’s typed into the placeholder)?
Please see pic for reference.
Thank you!
April 3, 2019 at 4:32 pm #858850Tom
Lead DeveloperLead DeveloperHi there,
This CSS will take you most of the way:
.navigation-search.nav-search-active { top: 60px; width: 300px; left: auto; background: #fff; padding: 30px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.05); } .navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus { background: #efefef; height: auto; border-radius: 5px; border: 1px solid #ddd; color: #000; } .navigation-search.nav-search-active:after { content: "Your test content"; margin-top: 10px; display: block; font-size: 13px; text-align: center; } .search-item.active:after { content: ""; position: absolute; bottom: 0; left: calc(50% - 7px); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff; z-index: 100; }
The arrow is harder simply because the search area isn’t aware of where the search icon is. Is your account the last item in your navigation?
April 3, 2019 at 5:25 pm #858888David
Hi Tom. Thanks for this!
Regarding the arrow, yes, search is the last item on the right.
April 4, 2019 at 8:26 am #859634Tom
Lead DeveloperLead DeveloperAny chance you can link me to your site so I can see what it looks like so far?
April 4, 2019 at 8:43 am #859665David
For sure. I added the link in the original message. The password to access it is “Orange991”
April 4, 2019 at 8:54 am #859675Tom
Lead DeveloperLead DeveloperThat password doesn’t seem to be working. Can you double-check?
April 4, 2019 at 9:39 am #859719David
Hi Tom. Still had cache enabled. Could you kindly try again?
April 4, 2019 at 4:22 pm #859994Tom
Lead DeveloperLead DeveloperI actually thought of a way to add the arrow regardless of how the menu items are positioned. I’ve adjusted the CSS above 🙂
April 5, 2019 at 6:04 am #860430David
That worked beautifully! One final question about it. I am trying to move the box over to the left so that the right side of it is parallel with the magnifying glass square. Here is what I added to accomplish it:
.navigation-search.nav-search-active {
position: absolute;
top: 47px;
width: 350px;
left: auto;
background: #fff;
padding-top: 25px;
padding-bottom: 15px;
padding-right: 15px;
padding-left: 15px;
margin-right: 228px; ***What I added***
box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
}The problem with this is that it is in the right position on my laptop/resolution but on another (larger, more pixels), it is pushed too far to the left.
Is there anyway to fix this? I toyed around with em and vw as well but got the same results.
April 5, 2019 at 3:58 pm #860967Tom
Lead DeveloperLead DeveloperI’m not sure if this is possible (without javascript), unfortunately, as the search form isn’t aware of where the search item is.
I’ll ping David to see if he has any ideas.
April 5, 2019 at 4:06 pm #860973David
StaffCustomer SupportTry this CSS:
.navigation-search.nav-search-active { top: 47px; width: 350px; left: auto; background: #fff; padding-top: 25px; padding-bottom: 15px; padding-right: 15px; padding-left: 15px; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); transform: translatex(100%); right: 50%; }
April 5, 2019 at 7:01 pm #861026David
Hey Tom and Dave,
Thanks so much for trying to help me. The problem is, as the screen size (width) increases, the search box is pushed over more and more. I only have a 14′ and 15′ … I imagine on even larger monitors it’ll be pushed too far over and look odd.
Does that make any sense?
April 6, 2019 at 4:10 am #861197David
StaffCustomer SupportIt looks great to me – this is on a 27″ monitor ( 90% of screen width):
https://www.useloom.com/share/f5d2237f7b694208be8b2f80eb837b7b
Maybe your browser cache needs clearing
April 25, 2019 at 6:03 am #879018David
Confused here… this was working. Now it appears that it isn’t. Checked my style.css and all style seems to be intact. Any ideas?
April 25, 2019 at 6:50 am #879181David
StaffCustomer SupportYou have some broken CSS in your child theme style sheet:
@media (max-width: 768px) { .main-navigation { border-bottom: 1px solid #E9E9E9; }
This is missing the closing
}
for the media query. -
AuthorPosts
- The topic ‘Search Bar Customization’ is closed to new replies.