- This topic has 16 replies, 2 voices, and was last updated 3 years, 3 months ago by Leo.
-
AuthorPosts
-
March 9, 2020 at 12:25 pm #1190044John MacKenzie
Hi all!
so Ive attempted to read and work through some of the other posts related to adding search and cart to the header but I am stuck now.
1) when i added the search to the menu i was able to customize the colours of the background of it and the text. When i add the search widget to the header i managed to get the background changed but cant seem to get the text colour to change to white?
2) I also want the cart icon added in the header beside the search box and I’ve done that in the MENU and looks ok on desktop, but on mobile, it create a hamburger and says menu! obviously its the only thing in there and we dont need a hamburger on mobile, how can we solve this short of hiding the menu on mobile? I also tried adding it as a widget but it bumps below the search box and doesnt look very good at all?Thanks!
March 9, 2020 at 6:56 pm #1190282TomLead DeveloperLead DeveloperHi there,
The text in your header search bar looks white – did you get that fixed?
As for hiding the secondary navigation on mobile, try this:
@media (max-width: 768px) { #secondary-navigation .menu-toggle { display: none; } #secondary-navigation ul { display: block; } .secondary-navigation, .header-widget { display: inline-block; vertical-align: top; } }
March 9, 2020 at 7:26 pm #1190297John MacKenzieHi Tom
no its still grey tried is different browsers too? taking about the search in the top header above the image of the map?
it says search Art or Artists (and ill need it a different colour when active since that turns the background white?
i can certainly hide it but i had wondered if there is another way (as would still love to have it on mobile) to make the cart icon show up?
thanks!
thanks!
JohnMarch 10, 2020 at 9:10 am #1191076TomLead DeveloperLead DeveloperAh, you may need to change the placeholder text: https://css-tricks.com/almanac/selectors/p/placeholder/
The CSS I provided still shows the cart icon on mobile.
March 11, 2020 at 9:27 pm #1192472John MacKenzieHi Tom
thanks. no the css code you gave doesnt get rid of the menu. I had to change it to
#secondary-navigation to hide everything, bit alas we still need the cart to show on mobile. can you let me know. I did away with fancy colours for now.i guess another question is for mobile can we stick thr cart in the same menu that the main hamburger shows up in (not the secondary menu?)
let me know
thanks!
JohnMarch 11, 2020 at 9:35 pm #1192474John MacKenzieoh and 2 other things
1) when i select on the search it puts the cursor in the centre of the box, not the left, can that be fixed?
2) is there a way to make the placeholder text disappear when clicked?thanks
March 12, 2020 at 8:21 am #1193038TomLead DeveloperLead DeveloperCan you add the CSS I provided as is so I can see why it’s not working?
You have this custom CSS added:
.search-field { width: 100%; padding: 0px; text-align: center; }
If you remove
text-align: center
, it won’t be centered.Placeholders are handled by the browser itself, so I don’t think it’s possible to make it disappear when selected.
March 12, 2020 at 9:36 pm #1193428John MacKenzieHi Tom
ok thanks ive added it as is now for you to check.
thanks for that
hmm i see placeholder text disappear all the time when clicked? ebay.com for example… the search text disappears when you click it.
thanks!
JohnMarch 13, 2020 at 9:44 am #1194046TomLead DeveloperLead DeveloperCan you try this, instead?: https://generatepress.com/forums/topic/search-bar-in-header-cart-icon-in-header-and-mobile-issues/#post-1190282
Those sites are likely using a javascript solution. Maybe this will help?: https://stackoverflow.com/a/12250084
March 13, 2020 at 9:54 am #1194053John MacKenziecode works thanks! now is there anyway on mobile to show the cart icon beside the search box instead of above (on the smallest screens) like iphone SE.
awesome! that JS works too. (maybe you want to add that to your theme bu default?
thanks!
JMarch 13, 2020 at 5:14 pm #1194251DavidStaffCustomer SupportHi there,
try this CSS – to keep the elements inline on small screens:
@media (max-width: 768px) { .inside-header { display: flex; flex-wrap: wrap; } .site-logo { flex: 1 0 100%; } .secondary-navigation { flex: 1; } .header-widget { flex: 3;width: unset; } }
You can also reduce the mobile left / right padding in Customizer > Layout > Header to give it a little more room.
April 8, 2020 at 1:10 pm #1231758John MacKenziethanks for all this. just an update that borders and the look of the search bar doesnt look right in Firefox. The search mag glass is missing, and the left and right borders appear to be as well? any ideas?
thanks!
John
April 8, 2020 at 7:31 pm #1232001TomLead DeveloperLead DeveloperTry removing this CSS from your child theme:
.header-widget { width: 250px; }
April 8, 2020 at 9:30 pm #1232044John MacKenzieawesome thanks!
John
April 9, 2020 at 9:06 am #1232833TomLead DeveloperLead DeveloperYou’re welcome 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.