Skip to content
Public Ticket #16174

Add Call to Action Button to Header

Conversation thread

Chriistyii replied

5 years ago
Customer Reply

Perfect, thank you!!

PenciDesign replied

5 years ago
Staff Reply

Hi,

If you want to do that for multiple menu items, please do follow steps:

1/ Go to Appearance > Menus > add "CSS Classes" to menu items you want to display it as a button - check this image: http://prntscr.com/10p665g - the CSS Classes should be:

penci-menubtn

2/ Add more of this code to Customize > Custom CSS:

#navigation.header-6 ul.menu > li.penci-menubtn > a {
    line-height: 40px !important;
    margin-top: 19px;
    padding: 0 12px;
    background: #ff0000;
    color: #ffffff;
}
#navigation.header-6 ul.menu > li.penci-menubtn > a:before{
    content: none; display: none;
}
.is-sticky #navigation.header-6 ul.menu > li.penci-menubtn > a{
    margin-top: 9px;
}

Best Regards,

PenciDesign

Chriistyii replied

5 years ago
Customer Reply

Thank you! This is extremely helpful. If I wanted to add a second call to action button to the header, what would I change in the CSS to identify the second button?

PenciDesign replied

5 years ago
Staff Reply

Hi,

To do that, please do follow the steps below: 

You can add more of this code to Customize > Custom CSS to style the URL "claim free crypto" on your menu to make it display as a button:

#navigation.header-6 ul.menu > li:last-child > a {
    line-height: 40px !important;
    margin-top: 19px;
    padding: 0 12px;
    background: #ff0000;
    color: #ffffff;
}
#navigation.header-6 ul.menu > li:last-child > a:before{
    content: none; display: none;
}
.is-sticky #navigation.header-6 ul.menu > li:last-child > a{
    margin-top: 9px;
}

Change the color codes ff0000 and  ffffff to color codes as you want to change the background & text color for this button.

Best Regards,

PenciDesign

Chriistyii started the conversation

5 years ago
Conversation Start

Hi there, 

I would like to add a call to action button in the header. There is a link that says "claim free crypto" that I would like to make into a button. Can someone please advise on some way that I could do this? I don't see any header available with a button, or the option in the Menus to add this.

Thanks!

Want to join this conversation or access attachments? Sign in first.

Login to Reply