- This topic has 9 replies, 4 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Dear Team,
Kindly help on setting up a button like below:Requirement button:
https://pasteboard.co/va4Ndc5o0Cim.pngCurrent Interface:
https://pasteboard.co/mJaTvEHDBRj5.pngThanks a lot
SarathyCustomer Support
Hi there,
1. Create a new Block Element in Appearance > Elements:
https://docs.generatepress.com/article/block-element-hook/
2. Set he Hook to
menu_bar_items3. Set the Display Rules to
Entire Site3. In the element editor add a Button Block ( i suggest using GenerateBlocks here ).
3.1 With the button selected in Advanced > Additional CSS Class(es) add:
hide-on-desktop hide-on-tabletPublish the Element.
Awesome,
It works well.How to remove the button , and add only the PHone icon (red color)?
Thanks again!
Customer Support
The appointment button is added as a menu item, do you want to remove it completely?
If so, go to appearance > menu, and remove it from the menu items.
Thanks for the reply Ying . I need 2 help.
I added the Appointment link on menu. For this Appointment Button, ON hover, I see a Blue COlor On hover for the link. How to change the Hover link color.
2) I would like to add a Phone Icon without Button on Mobile. Currently the Button looks very big on mobile, I feel that Just a phone Icon would look good.
Kindly hlep
Edit the button, you can:
1. remove its Color > Background & Background Hover colors
2. reduce its Spacing > PaddingThen it will just show the icon.
Thank You David
I am not using a Button. I am using a CSS given on your help/documenation page to create a button out of Menu links:@media (min-width:769px) { .main-navigation .main-nav ul li.nav-button a { background-color: black; border: 2px solid white; color: white; line-height: 35px; /*this number will likely need to be adjusted*/ } }But there is no Hover Link Color here.
2:
I dont see a Padding option in the button hook:
https://pasteboard.co/sWSJAolpM1mQ.pngThanks again
Customer Support
You can add a hover link like this:
@media (min-width:769px) { .main-navigation .main-nav ul li.nav-button a { background-color: black; border: 2px solid white; color: white; line-height: 35px; /*this number will likely need to be adjusted*/ } .main-navigation .main-nav ul li.nav-button a:hover { background-color: #fff; color: #000; } }I dont see a Padding option in the button hook:
Make sure to click on the Button block:
https://docs.generateblocks.com/article/buttons-overview/#buttonAnd not the Buttons wrapper as your screenshot shows:
https://docs.generateblocks.com/article/buttons-overview/#buttons-containerThanks a lot for your patience and help. I am not using generateblocks yet.
You are referring to this button ?
https://www.screencast.com/t/F3CqiNNBmj
As that is a GenerateBlocks Button that has been added to a Block Element.
For the
appointmentbutton then Leos code would work for that
- You must be logged in to reply to this topic.
