[Support request] How to move search icon in mobile menu?

Home Forums Support How to move search icon in mobile menu?

  • This topic has 3 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1504329
    Sol

    Hi Team!

    http://healingwithzen.com/ mobile menu

    Currently, we have 4 things on the mobile menu:
    logo, book now button, menu, search icon.

    We want to have in 1 line: logo, menu, book now button. The search icon should either be the only thing centered in the second line below the logom book now and menu OR removed from this section and added inside of the menu.

    #1504513
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    @media(max-width: 768px) {
        .main-navigation .menu-bar-items {
            order: 20;
            flex: 1;
            display: flex;
            justify-content: flex-end;
        }
        .navigation-search.nav-search-active {
            top: 50%;
        }
    }
    #1505766
    Sol

    Hi David,

    Thanks for the reply. That did not work. It pushed the menu button down to a second line on the left and then the magnifying glass to the third line on the right.

    Do you have another solution?

    Here’s all the CSS we’re using if you need to reference:


    @media
    (max-width: 768px) {
    .inside-header>:not(:last-child):not(.main-navigation) {
    margin-bottom: 0;
    }
    }
    @media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
    background-color: #f37f3d;
    border: 1px solid #000000;
    color: #000000;
    line-height: 30px;
    }
    }
    @media (min-width:769px) {
    .secondary-navigation .main-nav ul li.nav-button a {
    background-color: #f37f3d;
    border: 1px solid #000000;
    color: #000000;
    line-height: 35px;
    }
    }

    #mbutton {
    width:105px;
    background-color: #f37f3d;
    border: 1px solid #000000;
    color: #000000;
    line-height: 20px;
    margin-left: 20px;
    margin-right: 0px;
    }

    .slideout-navigation li.nav-button a {
    background-color: #f37f3d;
    border: 1px solid #000000;
    color: #000000;
    line-height: 20px;
    }

    .slideout-navigation.do-overlay .menu-item-has-children .dropdown-menu-toggle {
    border: 0;
    }


    @media
    (min-width: 769px) {
    .navigation-search {
    top: 100%;
    }
    }


    @media
    (min-width: 769px) {
    .navigation-search input {
    text-align: center;
    }
    }

    .slideout-navigation.main-navigation .main-nav ul li:hover>a,
    .slideout-navigation.main-navigation .main-nav ul li:focus>a,
    .slideout-navigation.main-navigation .main-nav ul li.sfHover>a {
    color: #000 !important;
    }

    #1505920
    David
    Staff
    Customer Support

    The issue is, there isn’t enough room too accomodate the logo, button and Menu ( with label ) on smaller screen devices.

    You could reduce the space the occupy by removing the Mobile Menu label, and using a logo that is smaller for the mobile header.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.