This article is about adding Callout Button in the Main Navigation Menu using Jupiter theme. The process needs custom CSS coding and in each case we will give the proper code as a base which you can use for further customization.
Add Callout Button in the Menu
You need to follow the steps below to add the Callout Button in the main menu of your website:
Go to WordPress Admin Menu > Appearance > Menus and add a Custom Link menu item. Set the Link option to the website you want to access and the Text option to whatever text you want your Callout Button to have.
Scroll up to the top of the screen and click on the Screen Options. A dropdown menu will appear with different items. Enable the CSS Classes checkbox item and close the Screen Options dropdown menu.
Scroll back to the menu item you created in step 1, and you will see a new option has appeared in the menu item called CSS Classes (Optional). Add the CSS Class below to that option:
callout-button
Click on the Save button at the bottom of the screen to save all changes so far.
Go to Theme Options > Advanced > Custom CSS and add the code below:
.callout-button a {
background-color: #00ff00;
padding: 7px 5px;
border-radius: 10px;
border: 1px solid #ff0000;
-webkit-transition: all 400ms;
transition: width all 400ms;
}
.callout-button a:hover {
background-color: #ff0000;
border: 1px solid #00ff00;
-webkit-transition: all 400ms;
transition: width all 400ms;
}
.callout-button a:after {
display: none !important;
}Feel free to change the Paddings and Colors to suite your needs. The suggested CSS code is only a blueprint for your further customization.
