Site logo

Archived topic

There is a "x" displaying within mobile menu

3 replies · Started by Hilton on November 29, 2019

Viewing posts 1–4 of 4

Hi,

You can see the element here https://prnt.sc/q42gq1

Thanks

ps: just for your information, this is the function I am using:

/**
 * Customizar busca do menu principal
 */
add_filter( 'generate_navigation_search_output', function() {
    printf(  
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Buscar ..."  class="search-field" value="%2$s" name="s" title="%3$s" />
            <input type="submit" class="search-button" value="">
        </form>', 
        esc_url( home_url( '/' ) ), 
        esc_attr( get_search_query() ),   
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

ant this is the CSS:

.navigation-search input[type="search"]::placeholder {
    color: #cccccc;
}
.navigation-search.nav-search-active {
    left: auto;
    width: 100%;
    top: 100%;
    padding: 12px;
    background: #0e549a;
	box-sizing: border-box;
}
.navigation-search.nav-search-active input {
    border: 1px solid #ddd;
    border-radius: 5px;
    height: auto;
    opacity:1;
}
.navigation-search input[type="search"] {
    background-color: #f9f9f9 !important;
    color: #595959 !important;
}

.navigation-search.nav-search-active .search-button {
    position: absolute;
    right: 30px;
    top: calc(50% - 15px);
    height: 30px;
    display: block;
    content: "\f002";
    font-family: GeneratePress;
    width: auto;
    background: transparent !important;
    color: #595959;
    border: 0;
    padding-left: 5px;
    padding-right: 5px;
}

Hi there,

i can see this CSS:

button.menu-toggle {
    position: absolute;
    left: 0;
}

Try changing it to:

button.menu-toggle {
    position: absolute;
    left: 0;
    top: 0;
}

David,

Thanks a lot!

You're welcome

This archived topic is closed to new replies.