[Resolved] HEADER SECTION (BUTTON & SEARCH BAR)

[Huseyin]

Hey GeneratePress TEAM

So I need help on two parts on the header, so I’m currently migrating from “heavy” theme to generate press (currently my dummy site; https://kogodigital.com/) and my LIVE website http://acehsc.net/

1. I want a button on the header like on my live site
2. Want the search like on my live site

Thanks
Huseyin

[Leo]

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 🙂

[Huseyin]

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.

[David]

Hi there,

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

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

[Huseyin]

Thanks, David

[David]

Glad to be of help

[Huseyin]

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

[David]

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

[Huseyin]

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

[David]

Replace your Menu Item CSS Classes with:

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

[Huseyin]

Legend! Thank you very much David 😉

[David]

You’re welcome

[Author]

Posts