MAGEEWP

Themes for WordPress

MAGEEWP

Themes for WordPress

Homepage Forums OneTone Theme Call to action in Header Menu

This topic contains 1 reply, has 2 voices, and was last updated by  Magee 2 weeks, 1 day ago.

  • Author
    Posts
  • #61533

    EFM
    Participant
    • Topics: 3
    • Replies: 6
    • Total posts: 9

    Hello!

    How can I customize call to action button in header menu? I’ve created a link (“Pueba GRATIS”), I check Class CSS (“cta-unete”) and I’ve add this link to the menu. At aditional CSS i write next code:

    /* CTA Únete a nosotros */

    .cta-unete {border-radius: 0px;}
    .cta-unete a {color: #fff!important;}
    li.cta-unete {
    background-color:#ed7818;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 13px 10px 10px!important;
    border-radius: 50px;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;}
    li.cta-unete:hover {background-color:#c96310;}

    .et-fixed-header #top-menu .cta-unete a {
    color: #fff!important;}
    .cta-unete li.current-menu-ancestor > a, .cta-unete li.current-menu-item > a {
    color: #fff !important;}

    @media only screen and (min-width : 981px) {
    li.cta-unete {height: 33px;}}

    But result is not good, because button appear wrong:

    CTA

    Anyone can help me?

    Thank you very much and sorry for my little english!

  • #61551

    Magee
    Keymaster
    • Topics: 30
    • Replies: 1853
    • Total posts: 1883

    You can set navigation label for this menu item as <span class="cta-unete">Pueba GRATIS</span>, then write css like:

    .cta-unete {
    color: #fff;
    background-color:#ed7818;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 13px 10px 10px!important;
    border-radius: 50px;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;}

You must be logged in to reply to this topic.