[Resolved] Secondary Navigation Menu Title

[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!

[Leo]

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?

[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.

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.

[Leo]

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

[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.

[Leo]

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 🙂

[Justin]

Done, I think 🙂

[Leo]

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/

[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.

[Leo]

Glad I could help 🙂

[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

[David]

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>

[Justin]

That was easy. Thanks!

[David]

You’re welcome

[Author]

Posts