[Resolved] Search Bar in Header, Cart Icon in Header and mobile issues

Home Forums Support Search Bar in Header, Cart Icon in Header and mobile issues

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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!

    #1190282
    Tom
    Lead Developer
    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;
        }
    }
    #1190297
    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

    #1191076
    Tom
    Lead Developer
    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.

    #1192472
    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

    #1192474
    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

    #1193038
    Tom
    Lead Developer
    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.

    #1193428
    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

    #1194046
    Tom
    Lead Developer
    Lead Developer
    #1194053
    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

    #1194251
    David
    Staff
    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.

    #1231758
    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

    #1232001
    Tom
    Lead Developer
    Lead Developer

    Try removing this CSS from your child theme:

    .header-widget {
        width: 250px;
    }
    #1232044
    John MacKenzie

    awesome thanks!

    John

    #1232833
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.