In Uncode you can create a modern Call To Action Menu. This kind of menu is generally used to insert evident links in the main menu area (usually with the appearance of buttons), but it can be used also for the creation of secondary simple menu items separated from the main menu (login, language, etc). The Call To Action Menu, as the Main Menu, supports submenu dropdowns and Megamenu, screenshot .
To activate the Call To Action Menu:
- Please navigate to the Theme Options → Navbar → Additional and set the Hide Call To Action Menu option to OFF, screenshot ;
- Create a new menu from WordPress → Appearance → Menu and apply your new created menu to the Call To Action Menu location in the Manage Location tab, screenshot .
Justify Menu: if you use the Justify Menu layout and you have a long CTA Menu it's possible the Main Menu is not centered in the viewport. To fix this issue please insert this code in the Theme Options > CSS and adjust the 'min-width' value with the width of your CTA Menu:
@media (min-width: 960px){ body.hmenu-position-center .logo-container { min-width: 320px; } }
Button style
You can apply a button style for the first level menu item to allow one of your main menu item to stand-out from the others. This is often used for a Call To Action. To accomplish this, simply click the Button Style option inside your menu item options, screenshot .
To change the appearance of the button menu item, you can simple paste some of these CSS classes in the CSS Classes field (if the CSS Classes is not visible please enable it from the Screen Options at the top of your menu page). Please note that you can also combine CSS Classes, screenshot :
- btn-circle: use this setting to render the circle style button;
- btn-round: use this setting to render the round style button;
- btn-square: use this setting to render the square style button;
- btn-outline: use this setting to render the transparent button with the colored outline border;
- btn-accent: use this setting to render the button accent color;
- btn-color-xxxxxx: use this setting to render any Palette color (based on the color ID, screenshot );
- btn-flat: use this setting to render the flat color on hover (solid color without transparency). It must be used associated with a color;
- btn-disable-hover: use this setting to remove the hover effect.
Comments
0 comments
Article is closed for comments.