Bakerville2: Search icon not working/displaying correctly

  • nilla2014 · Member ·

    Hi,

    I have these 2 issues:

    1. Search icon not functioning on a mobile device and 24” screen desktop.
    2. Search icon displays beneath RSS Feed icon on mobile device and 24″ screen desktop.

    First option: Display search icon left-side of social menu for mobile and right-side of the social menu for large desktops.
    Second option: Display search icon below social menu on right-side for both mobile device and large desktops.

    Using following CSS for the mobile display, which is OK, but the icon isn’t functioning:


    @media     (min-width: 240px) and (max-width: 560px) {
    .search-icon:before, .search-icon {
    padding-top: 1.2em;
    }
    }

    I’ve used this CSS for large desktop (removed now), which displays icon below social menu, but search icon still doesn’t function:


    @media     only screen and (min-width: 1920px) {
    .search-icon:before {
    padding-top: 1.5em;
    }

    Many thanks – appreciate the help!

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi there, actually it looks like some of your custom CSS is causing the social icons to overlap the search bar. If you remove that CSS, which repositions the social icons, the search button works.

    You’d be welcome to remove that CSS so the theme functions as it normally would, or you can consider moving the icons somewhere else if you’d like.

    Also, for what it’s worth, we aren’t able to provide support for repositioning elements — as that can cause the sorts of issues you’re running into now. But you can get outside help with that if needed.
    https://en.support.wordpress.com/custom-design/css-support/

    Hoping this helps!

  • nilla2014 · Member ·

    Thanks for your suggestions, so I can display the social menu inline with the nav menu but centred so that the search icon displays to the right?

    Many thanks

  • staff-blorbo · Staff ·

    That’s a structural change that’s a bit beyond the scope of what can be done with just CSS. Elements can be moved around, but they can’t be moved on top of or inside other elements.

  • nilla2014 · Member ·

    Thanks @macmanx

    I’ve worked the CSS out. The social menu and the now functioning search icon displays correctly for all devices, except the 24″ desktop screen. So I’ll persevere with testing.

  • The topic ‘Bakerville2: Search icon not working/displaying correctly’ is closed to new replies.