Create shortcode for only sticky header

Hi Austin,

We could try a solution to hide the element on static navigation.

Can you link me to the page in question with the shortcode added in?

Let me know :)

Hey Leo,

Do you just need a link to one of the site pages that has the shortcode referenced? Or would you like me to include the shortcode? Thanks

Please add in the shortcode in the navigation so that it will show on both static and sticky navigation first - you will likely need to use a hook:
https://docs.generatepress.com/article/hooks-element-overview/

Gotcha

Hey Leo,

Here is a link to the site: https://golfhomes.servebolt.us/

For some reason now the sticky on mobile isn't working, only desktop.

I put the shortcode hook in the header, but I would like it not to be showing on desktop or mobile, until sticky is activated. Let me know if the position needs to be changed. Thanks

Hi there,

Are you trying to make the search bar behave like this?
https://share.getcloudapp.com/NQuwd8p4

If so, try adding this CSS:

nav#site-navigation .sidx-container {
    display: none;
}

nav#sticky-navigation .sidx-container {
    display: block;
}

Hey Elvin,

Im trying to remove the logo and menu in the primary navigation and the "search" stay hidden until scrolling, then appear as a sticky header.

Ok the css code made the search box disappear, then reappear. could we make the logo and menu disappear all together since its in the secondary navigation above it?

Ok the css code made the search box disappear, then reappear. could we make the logo and menu disappear all together since its in the secondary navigation above it?

I'm not sure what you mean. Do you want to remove the whole primary navigation(white) as well?

If we do that, there won't be any sticky navigation visible. The secondary navigation (grey one) doesn't go sticky. Only the white one(primary navigation) does.

If I may suggest, since secondary navigation(grey) is redundant, you might as well remove it.

To remove the secondary navigation: Simple remove the any menu that's assigned to this menu location.

Hey Elvin,

If I remove the secondary navigation then I would have all on the sticky navigation. I only want the real estate search to be on the sticky navigation when scrolling, no logo, no menu if that makes sense. Just the search bar

So the best solution I could find was to put the logo and menu in the secondary navigation above the primary, and while the page is up top, nothing appears on the primary navigation, then when scrolling, the real estate search bar appears but no logo, no menu

I know it is obviously a large company / website, but Zillow.com has the idea and that is what I am trying to achieve.

Ah I see what you mean now. You want something like Zillow's.

Like this right? https://share.getcloudapp.com/v1ubAJ6r

If that's the case, add this CSS:

.sidx-container {
    margin-left: auto;
    margin-right: auto;
}

nav#sticky-navigation .inside-navigation.grid-container > *:not(.sidx-container) {
    display: none;
}