[Resolved] buttons from secondary nav links

Home Forums Support [Resolved] buttons from secondary nav links

Home Forums Support buttons from secondary nav links

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1659706
    Mark

    I have a GP site at lindley.michianait.net

    I should like to make the Signup link and the Search glass buttons.

    I have followed the instructions in your documentation about making buttons from nav links. It seems to work fine on the primary nav links, but does not seem to work with the secondary have links.

    I remember somewhere where I might have checked merge secondary menu with top bar, but I can’t find it now.

    Anyway, if you could tell me where I am going wrong and how to make the secondary menu links, sign up and the search glass, into buttons, I would appreciate it.

    Thanks

    #1659722
    Mark

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

    Mark

    #1659724
    Ying
    Staff
    Customer Support

    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

    #1659742
    Mark

    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

    #1659748
    Ying
    Staff
    Customer Support

    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/

    #1660270
    Mark

    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

    #1660655
    Ying
    Staff
    Customer Support

    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

    #1660694
    Mark

    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

    #1660716
    Ying
    Staff
    Customer Support

    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.