Search icon on Sticky Navigation

Hi there,

Try adding this CSS:

nav#site-navigation .custom-search {
    display: none;
}

nav#sticky-navigation .custom-search {
    display: block;
    flex: 1;
    flex-direction: row;
}

nav#sticky-navigation .custom-search form.search-form { 
    display: flex;
    flex-direction: row;
    width: auto;
}

nav#sticky-navigation .custom-search input[type="search"] {
    max-width: auto;
}

nav#sticky-navigation .inside-navigation.grid-container {
    flex-wrap: nowrap;
}

Note: This isn't going to fit perfectly on all viewports because your custom search has a fixed width. On viewports smaller than 1000px, some flex wrapping will occur.

It's hiding the Search box on main navigation. I want to dispay the existing search box on main navgation. While scrolling, I want to display the search icon.

It’s hiding the Search box on main navigation. I want to dispay the existing search box on main navgation. While scrolling, I want to display the search icon.

On your topic, You've said you want to hide it on the main navigation. Is this not the case anymore? Can you confirm?
https://share.getcloudapp.com/xQu7qeK4

But, I want to hide it only on main navigation and display it on sticky navigation

To clarify:

What you're trying to do is to show a search bar box when it's NOT in sticky mode but turn it into an icon when it's in sticky mode?

Is this the case? Let us know.

Yes

Change this CSS:

@media (min-width: 769px) {
    .menu-bar-items .search-item {
        display: none !important;
    }
}

to:

@media (min-width: 769px) {
    .main-navigation:not(.is_stuck) .menu-bar-items .search-item {
        display: none !important;
    }
}

It worked and by the way, I have turned on off canvas menu on PC only but it is also displaying on tablet

Is the navigation search issue resolved ?
If so can you resolve this topic and start a new one if required.