HEADER SECTION (BUTTON & SEARCH BAR)

Hi there,

1. This should help:
https://docs.generatepress.com/article/adding-buttons-navigation/

2. That exact style would require custom js solution unfortunately. This would give you something close:
https://generatepress.com/forums/topic/navigation-search-box-adjustments-width-and-style/#post-985589

Let me know if this helps :)

Thanks, Leo for the reply

For the search bar, the code generated something else so I have changed my mind, I simply want the code to get the search bar under the navigation bar.

Hi there,

add this CSS to make the Search field open below the navigation:

.navigation-search.nav-search-active {
    top: 100%;
}

Thanks, David

Glad to be of help

Wondering how could disable the button showing in primary navigation in mobile & tablet devices ?

Do you want to remove that menu item ?
If so you can add a hide-on-* CSS class to the menu item as well:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Hi,

I tried using this css code to hide it but it doesn't work

@media (min-width: 1025px) {
    .nav-button {
   display: none;
}

menu item screenshot: https://ibb.co/qssgLph

Replace your Menu Item CSS Classes with:

nav-button hide-on-tablet hide-on-mobile

Legend! Thank you very much David ;)

You're welcome