How to create the Yellow Register button

If you choose to automatically import the Sample Demo data for VideoPro Demo V2 before, the yellow Register button has been included already. However, if you want to manually create it your own, please follow these steps:

RegistorButton

  • Step 1: Go to Appearance > Menu to create a menu item from a Register Page

RegistorButton-CreateMenuItem

  • Step 2: Configure the menu item as below
    • Navigation Label is <i class="fa fa-arrow-circle-o-right"></i> Register
    • Display Logic is Only Visible to Guests

RegistorButton-Admin

  • Step 3: Choose one of two CSS segments below to add to Appearance > Theme Options > General > Custom CSS to style the menu item as a button. Please check the option Appearance > Theme Options > Theme Layout > Mega Menu:

If Mega Menu: ON, choose this code.

#mega-menu-item-3189 a {
padding: 5px 10px;
margin: 33px;
background: #F5EB4E;
border-radius: 3px;
color: #000;
}
#mega-menu-item-3189:hover a:after,
#mega-menu-item-3189.current-menu-item > a:after {
background-color:transparent !important;
}
.cactus-nav-style-3 #mega-menu-item-3189 a { margin: 7px 33px; }
.sticky-menu #mega-menu-item-3189 a { margin:13px }

If Mega Menu: OFF, choose this one instead

#nav-menu-item-3189 a {
padding: 5px 10px;
margin: 33px;
background: #F5EB4E;
border-radius: 3px;
color: #000;
}
#nav-menu-item-3189:hover a:after,
#nav-menu-item-3189.current-menu-item > a:after {
background-color:transparent !important;
}
.cactus-nav-style-3 #nav-menu-item-3189 a { margin: 7px 33px; }
.sticky-menu #nav-menu-item-3189 a { margin:13px }

  • NOTE: The CSS above is for the menu item with ID 3189 but you need to replace it with the ID of your menu item. Please check this image to know how to get the menu-item-ID

RegistorButton-getID