buttons from secondary nav links

I am trying to mimic the behavior for the nav buttons on this site: https://www.geosociety.org

Mark

Hi Mark,

Are you trying to activate the search in secondary navigation?

If so this is what you need:
https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation

Yes, but I want to customize the search mag glass so it looks like it does here: https://www.geosociety.org/

I want to make the "sign in" link in the secondary menu into a button so it also looks like it does on https://www.geosociety.org.

So I don't know if BOTH the search mag glass AND the "Sign in" menu link (both in the secondary menu) need to be buttons, or just the "Sign In" link should be a button, and the search mag glass is just a customized icon.

Thanks,

Mark

It actually doesn't matter, it doesn't have to be a button, as long as it's a link is ok.

For example, I just use CSS styled the search icon in developer tool:
https://www.screencast.com/t/efcvQimNC
https://www.screencast.com/t/29vaVIFKiu

This is the CSS I used for the search icon:

.menu-bar-item.search-item a {
    background-image: linear-gradient( 
-180deg
 , rgb(133, 107, 160) 0%, rgb(41, 9, 73) 98%);
    border: 1px solid #FFFFFF;
    box-shadow: 2px 2px 4px 3px rgb(0 0 0 / 50%);
    border-radius: 8px;
    padding: 0.2em 0.8em;
    color: #fff;

And this is for the sign up link:

li#menu-item-63 a {
    color: #fff;
    background-image: linear-gradient( 
-180deg
 , #679377 3%, #16421F 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#679377, endColorstr=#16421F)";
    border: 1px solid #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 50%);
    border-radius: 6px;
    padding: 7px 8px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

I couldn't quite follow your response. In the generate press docs, it shows how to make menu links into buttons for primary and secondary nav menus.

The explanation works fine for the primary nav buttons, but the supplied CSS in the documentation for the secondary menu links does not seem to target them at all. Is there some different CSS I need to use to target links in the secondary nav?

Thanks,

Mark

Ah sorry I misunderstood your question, the CSS selector in the documentation only works when secondary navigation is not merged with top bar.

So in your case, the selector for secondary navigation button would be:.menu-secondary-container ul li.nav-button a

Thanks,

I don't even know if I want/need to merge the secondary nav with the top bar. In fact, I don't even remember selecting merge with top bar. Where would that be? What does the page look like WITHOUT the top bar - where does the secondary nav display?

Mark

I guess you set it in appearance > widgets > top bar.

1) Simply remove the secondary navigation from the top bar widgets.
2) Go to Customizing > Layout > Secondary Navigation > navigation location, choose Above header.

If you don't see the option in step 2, go to Appearance > Generatepress > Modules, activate Secondary Nav.

Let me know.