- This topic has 13 replies, 5 voices, and was last updated 2 years, 12 months ago by
.
-
Posts
-
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
Customer Support
Hi there,
Edit your CSS selector to this:
.main-navigation .main-nav ul > li.nav-button > aThanks Leo. That works great.
No problem 🙂
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
Customer Support
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_items4. Set the Display Rules.
This way you can style the button exactly the same way as your other button
that works. thx
How can we add the same CTA into the mobile menu ?
thx
Customer Support
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?
to show with the other menu items by clicking the hamburger icon on mobile
thx Ying
In that case, this solution would do: https://docs.generatepress.com/article/adding-buttons-navigation/
You just need to add
hide-on-destopclass along with thenav-buttonclass, so it won’t display on the desktop.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.jpgwhat is the solution ?
plz.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 🙂
thx
No problem 🙂
- You must be logged in to reply to this topic.
