I would like to add styling to a page link in my menu 'Contact Us' to make it more prominent and appear as a call to action button.
There is already styling of this button on your Weathy - App Landing demo (https://demo.kaliumtheme.com/landing/). In this example the button is a 'Get The App' button.
I'm aware that this is just some additional CSS for that particular menu item, but I was hoping you could give me instructions on how to do so on my site.
In your admin panel go to Appearance > Menus and then follow the instructions in the video, after you've don that click Save changes and go to Custom CSS where you have to add the lines of code below:
/* Menu: Special Button */
.special-button a {
background: #EEE;
color: #858a99 !important;
border-radius: 50px;
padding: 4px 15px;
}
/* Menu: Special Button on Hover*/
.special-button a:hover {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow all 300ms;
}
/* Menu: Special Button Remove Underline */
.special-button a:after {
display: none;
}
I would like to add styling to a page link in my menu 'Contact Us' to make it more prominent and appear as a call to action button.
There is already styling of this button on your Weathy - App Landing demo (https://demo.kaliumtheme.com/landing/). In this example the button is a 'Get The App' button.
I'm aware that this is just some additional CSS for that particular menu item, but I was hoping you could give me instructions on how to do so on my site.
Hi blackmanfinn,
In your admin panel go to Appearance > Menus and then follow the instructions in the video, after you've don that click Save changes and go to Custom CSS where you have to add the lines of code below:
/* Menu: Special Button */ .special-button a { background: #EEE; color: #858a99 !important; border-radius: 50px; padding: 4px 15px; } /* Menu: Special Button on Hover*/ .special-button a:hover { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); transition: box-shadow all 300ms; } /* Menu: Special Button Remove Underline */ .special-button a:after { display: none; }Best regards,
Laborator Team