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.
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?
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:
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!
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
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?
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:
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
Perfect, thank you!!