Search Bar in Header, Cart Icon in Header and mobile issues

[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!

[Tom Lead Developer]

Hi 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-development

[John 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!
John

[Tom Lead Developer]

Ah, 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-development

[John 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!
John

[John 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

[Tom Lead Developer]

Can 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-development

[John 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!
John

[Tom Lead Developer]

Can 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-development

[John 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!
J

[David Customer Support]

Hi 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/

[John 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

[Tom Lead Developer]

Try 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-development

[John MacKenzie]

awesome thanks!

John

[Tom Lead Developer]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts