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

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;
    }
}

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

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.

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

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

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.

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

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

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

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.

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

Try removing this CSS from your child theme:

.header-widget {
    width: 250px;
}

awesome thanks!

John

You're welcome :)