- This topic has 16 replies, 2 voices, and was last updated 3 months ago by
Leo.
-
AuthorPosts
-
March 9, 2020 at 12:25 pm #1190044
John 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 #1190282Tom
Lead 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 9, 2020 at 7:26 pm #1190297John MacKenzie
Hi 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 #1191076Tom
Lead 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 11, 2020 at 9:27 pm #1192472John MacKenzie
Hi 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 MacKenzie
oh 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 #1193038Tom
Lead 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 12, 2020 at 9:36 pm #1193428John MacKenzie
Hi 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 #1194046Tom
Lead 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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 13, 2020 at 9:54 am #1194053John MacKenzie
code 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 #1194251David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 8, 2020 at 1:10 pm #1231758John MacKenzie
thanks 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 #1232001Tom
Lead DeveloperLead DeveloperTry removing this CSS from your child theme:
.header-widget { width: 250px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 8, 2020 at 9:30 pm #1232044John MacKenzie
awesome thanks!
John
April 9, 2020 at 9:06 am #1232833Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.