search box overlaps with menu

Hi there,

i am not seeing the Navigation search icon ?

It can be an issue when enabled and only the Off Canvas toggle is present. If you want to use it then try adding this CSS:

@media(min-width: 769px) {
    #site-navigation {
        flex: 1;
    }
    #site-navigation .inside-navigation {
        justify-content: flex-end;
    }
    .search-form.navigation-search.nav-search-active {
        max-width: 360px;
        left: auto;
        right: 80px;
    }
}

added the css

https://ibb.co/BKbGhgh

now it stretches from end to end

how to perfect this?

Updated CSS above. You can change the max-width of the field by updating this property: max-width: 360px;

worked perfectly, thanks

is there any possibility to give a black outline to the search box?

For sure - try this CSS:

.navigation-search input[type="search"] {
    border: 1px solid #000;
}

And if you want - add this CSS to remove the background from the Close X icon:

#site-navigation .menu-bar-items .search-item.active > a {
    background-color: unset;
}

You can set the colors of the search form in Customizer > Colors > Primary Navigation.

And if you want to add a Placeholder text to the search field - then see this doc:

https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder

wow, it worked perfect.

one final thing for the mobile menu

https://ibb.co/pWywzXP

pls check the link

the mobile hamburger menu icon has a light grey background - how to remove that?

Add this CSS:

.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled {
    background-color: unset;
}

it worked, thank you very much.

generatepress + david - killer combo - the best!

Glad to be of help