Menu Call To Action Button

It’s about conversions
Part of optimizing a page for conversions is making sure there is a clear call-to-action (CTA). You often see that CTA repeated several times on the page, whether
One trick you can employ to help with this is turning one of the navigation items into a call to action button. If you have a sticky menu, then your CTA will always be on the screen.
Here is the CSS that you need to make this happen. You can edit the style of the button to match the buttons already on your website.
Once you have this code in place, you may notice that nothing is happening yet. We need to
/*Menu CTA Button*/ @media only screen and (min-width: 981px){ #page-container .menu-cta a { background-color: #de3831; color: #ffffff!important; padding: 13px; padding-bottom: 13px !important; margin-top: -5px; border-radius: 0px; border-width: 2px; border-style: solid; border-color: #de3831!important; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.7s cubic-bezier(.25,.8,.25,1); }
#page-container .menu-cta:hover a { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); background: #ce2821; color: #fff!important; opacity: 1!important; padding: 13px; padding-bottom: 13px !important; margin-top: -5px; border-radius: 0; border-width: 2px; border-style: solid; border-color: #ce2821; }} /*End Menu CTA Button*/
The Screen Options menu is a handy contextual menu found in the upper-right corner of the WordPress dashboard
The first thing you will want to do is enable the CSS class box in the WordPress menu editor. CSS classes are not enabled by default. Once on the menu page, click on screen options in the upper right corner of the screen, and enable the CSS Classes checkbox from the menu.
Once the class is assigned, the button will appear, and you can adjust the styling as needed.
