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

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts