[Resolved] CTA button on menu item

[Lynn]

Hi there,
I used the css code on the following page – https://docs.generatepress.com/article/adding-buttons-navigation/ to add a button to one of the menu items in my primary navigation. It worked great. However, when I added sub menus to that menu item, a CTA button got added to each of the sub-menu items (please see http://www.arnpriorhumanesociety.ca/new-website/). I don’t want this. How can I have a button just on the parent item?

Thanks in advance for your advice.

Lynn

[Leo]

Hi there,

Edit your CSS selector to this:
.main-navigation .main-nav ul > li.nav-button > a

[Lynn]

Thanks Leo. That works great.

[Leo]

No problem 🙂

[Arnaud]

Leo –

https://wordpress-834202-2871905.cloudwaysapps.com/

I would like the CTA button in the primary navigation to look exactly the same as the CTA in the home hero section (Prdnre RDV with the icon).

What is the best solution ?

thx

[David]

Hi there,

for that button it would be easier to not use the CSS method.

Instead;

1. Create a New Block Element in Appearance > Elements:

https://docs.generatepress.com/article/block-element-hook/

2. Add your GB Button to the block editor.

2.1 With the Buttons block selected, in Advanced > Additional CSS Class(es) you can use the GP hide-on-* classes if you wish to hide the button on different devices:

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

3. Set the Hook to menu_bar_items

4. Set the Display Rules.

This way you can style the button exactly the same way as your other button

[Arnaud]

that works. thx

How can we add the same CTA into the mobile menu ?

thx

[Ying]

Do you want it to show along with the hamburger icon or do you want it to show with the other menu items by clicking the hamburger icon on mobile?

[Arnaud]

to show with the other menu items by clicking the hamburger icon on mobile

thx Ying

[Ying]

In that case, this solution would do: https://docs.generatepress.com/article/adding-buttons-navigation/

You just need to add hide-on-destop class along with the nav-button class, so it won’t display on the desktop.

[Arnaud]

https://wordpress-834202-2871905.cloudwaysapps.com/

i find a little issue.
By hiding on mobile the CTA button on the navigation, it’s also hide the CTA button on the hero section.

I want to CTA button on the hero section.

https://snipboard.io/wXg1W6.jpg
https://snipboard.io/ENlsCF.jpg

what is the solution ?
plz.

[Ying]

It’s because the 2 buttons blocks are using the same ID.

GB generates CSS (style) based on IDs, when the 2 blocks are sharing the same ID, their style will override each other.

The solution is easy, go to the hero section, select the buttons block, duplicate it and delete the original one.

The difference between duplicate and copy/paste is that duplicate generates a new set of ID for the new blocks, while copy/paste doesn’t.

Hope that’s clear 🙂

[Arnaud]

thx

[Ying]

No problem 🙂

[Author]

Posts