[Resolved] Secondary Navigation Menu Title

Home Forums Support Secondary Navigation Menu Title

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1108268
    Justin

    Hello,
    I have a secondary navigation menu immediately underneath my primary navigation. My secondary navigation is linking out to a series of “Best of” posts or “Buyers guide” posts. Right now, my menu has a title of “Best of.” How do I get this title to show to the left of my posts? I want to to basically look like BEST OF: SAWS HAMMERS DRILLS, for example.

    Thanks!

    #1108293
    Leo
    Staff
    Customer Support

    Hi there,

    Sorry I’m not sure if I understand.

    Can you explain a bit more or provide an example?

    What is the secondary navigation menu title you are referring to?

    #1108365
    Justin

    Hi there,
    When I filled out my support topic, it gave me the option to provide the URL to my website that only admins can see, which I provided. Are you able to see it?

    Here’s a screenshot.
    Nav

    The nav up top is the primary nav, and the lighter gray one underneath is the “secondary nav” at least according to WordPress. I want to preface “Training Aids” and “Books” with text that says “BEST OF” or potentially a small “best of” image. Basically I want a way to identify that all of the links in that navigation bar are going to be linking out to a buyer’s guide or best of page where I rank products in that particular category.

    #1108366
    Leo
    Staff
    Customer Support

    Yup I viewed the site already just didn’t understand what you are after.

    So you want the menu item to show as “Best of Training Aids”?

    If so couldn’t you just edit the Navigation Label field in the menu?
    https://www.screencast.com/t/bga3vboWhboT

    #1108368
    Justin

    I just want it to say “Best of” one time and not have that part of the link. Every item in that nav will be a “best of,” but I don’t want it to say “Best of Training Aids,” “Best of Books,” “Best of Podcasts.” I just want it to say Best of: Training Aids | Books | Podcasts.

    An example would be if you go to https://mygolfspy.com/, you’ll see a secondary navigation that says Driver, blade putter, mallet putter, etc. And to the left of all that, you’ll see a gold wreath-like icon. That’s their “most wanted” icon. Everything in that navigation is a part of their “most wanted” series.

    I’m looking to add some text or an icon/image to the left of my secondary navigation just like that.

    #1108371
    Leo
    Staff
    Customer Support

    OK I understand now – an example always helps 🙂

    That case try:

    – Creating a hook element:
    https://docs.generatepress.com/article/hooks-element-overview/

    -Add this as content:
    <div class="sec-nav-text">Best of</div>

    – Select inside_secondary_navigation hook under the Hook drop-down list

    – Select Entire site under Display Rules.

    Let me know when that’s done and I’ll provide some CSS to position it 🙂

    #1108379
    Justin

    Done, I think 🙂

    #1108385
    Leo
    Staff
    Customer Support

    Add this CSS:

    .secondary-navigation .inside-navigation {
        display: flex;
    }
    .sec-nav-text {
        margin-left: auto;
        line-height: 40px;
        color: #fff;
        font-size: 13px;
    }

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

    #1108389
    Justin

    You are a wonderful person. It is not yet perfect, but it is in a place where I can play with it and hopefully learn. Thank you very much.

    #1108406
    Leo
    Staff
    Customer Support

    Glad I could help 🙂

    #1323603
    Justin

    Hi Leo,
    Sorry for bringing back an old thread. Is there an easy way to hide this hook in mobile view? I only want the hamburger menu to show and not the text, right now they are both showing and it looks funky.

    Thanks,
    Justin

    #1323608
    David
    Staff
    Customer Support

    Hi there,

    you can use the hide-on-* classes in your HTML:

    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    eg,

    <div class="sec-nav-text hide-on-mobile">Best of</div>

    #1323611
    Justin

    That was easy. Thanks!

    #1323617
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.