Add Appointment Button On Mobile View

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_items

3. Set the Display Rules to Entire Site

3. 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-tablet

Publish the Element.

Awesome,
It works well.

How to remove the button , and add only the PHone icon (red color)?

Thanks again!

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 > Padding

Then 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.png

Thanks again

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/#button

And not the Buttons wrapper as your screenshot shows:
https://docs.generateblocks.com/article/buttons-overview/#buttons-container

Thanks 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 appointment button then Leos code would work for that