Adding a call-to-action button in sticky menu and menu bar

Is it possible to add a call-to-action button in the sticky menu and nav menu bar?
For example below, we want the ‘APPLY’ menu item to be a button.

Victor

Hello there,

Add a class name to you menu item from menu administration panel. For example button-menu-item

43

If the CSS Classes option doesn’t appear, expand the Screen Options at the top right side and tick the CSS Classes checkbox.

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    #mainnav .button-menu-item a {
      border: 2px solid red;
      padding: 0 20px;
      background-color: #ff0000;
      border: 1px solid #ff0000;
      border-radius: 5px;
    }

    #mainnav .button-menu-item a:hover {
      background-color: transparent;
      color: #ff0000;
    }

Regards,
Kharis

Hi Kharis,

You rock. It works. Thanks.

Victor

You’re welcome Victor!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,

We didn’t modify the custom CSS codes in the theme, but somehow the call-to-action button no longer works. It shows this error. Any ideas?

Site address: https://www.highschoolofthearts.org/

Codes copied from the site:

@media (min-width: 768px) {
#masthead .container {
width: 98%;
}
}

.page .entry-header {
display: none;
}

.header-image .slide-inner {
  top: 50%;
  -webkit-transform: translateY(-10%);
  -moz-transform: translateY(-10%);
  -ms-transform: translateY(-10%);
  -o-transform: translateY(-10%);
  transform: translateY(-10%);
}

.page-header-content .text-slider {
  position: relative;
  -webkit-animation-name: unset;
  animation-name: unset;
}

@media only screen and (min-width: 1025px) {

  .header-image .slide-inner{
    top: 70%;
  }

}

@media only screen and (min-width: 768px) {

  .page-header-content .text-slider .maintitle {
    font-size: 38px;
  }

}

.page-header-content.slide-inner {
display: block !important;
}

.page-id-2 .page-wrap {
padding-top: 0;
padding-bottom: 0;
}

#mainnav .button-menu-item a {
border: 2px solid red;
padding: 0 20px;
background-color: #ce003a;
border: 1px solid #ffffff;
border-radius: 1px;
}

#mainnav .button-menu-item a:hover {
  background-color: transparent;
  color: #ce003a;
}

.page-template.no-hero .content-wrapper {
padding-top: 0px;
}

@media only screen and (min-width: 1025px) {
  .header-contact .header-contact-info {
    width: 700px;
  }
  .header-contact .social-navigation {
    max-width: 250px;
  }
}

.page-id-2211 .page-wrap {

  padding-top: 0 !important;

}

div[data-id="944e017"] > div {

  padding-top: 0 !important;

}

.page-id-2277 .page-wrap {

  padding-top: 0 !important;

}

div[data-id="944e017"] > div {

  padding-top: 0 !important;

}

.page-id-2358 .page-wrap {

  padding-top: 0 !important;

}

div[data-id="944e017"] > div {

  padding-top: 0 !important;

}

.page-id-2371 .page-wrap {

  padding-top: 0 !important;

}

div[data-id="944e017"] > div {

  padding-top: 0 !important;

}

Error message:

Hello there,

The below notice indicates double declaration found on border property.

17

    #mainnav .button-menu-item a {
      border: 2px solid red;
      padding: 0 20px;
      background-color: #ce003a;
      border: 1px solid #ffffff;
      border-radius: 1px;
    }

Choose either border: 2px solid red; or border: 1px solid #ffffff; so it would look like this:

    #mainnav .button-menu-item a {
      border: 2px solid red;
      padding: 0 20px;
      background-color: #ce003a;
      border-radius: 1px;
    }

I found active social menu items only four: Facebook, Twitter, Instagram and Pinterest.

I conclude that no extra social menu link found and there’s nothing to do with the code.

Regards,
Kharis

Hi Kharis,

I copied the original code you provided back, but same problem. Th only thing I did was remove one of the original 5 social icons from the top menu, then this problem occurs.

#mainnav .button-menu-item a {
border: 2px solid red;
padding: 0 20px;
background-color: #ff0000;
border: 1px solid #ff0000;
border-radius: 5px;
}

#mainnav .button-menu-item a:hover {
  background-color: transparent;
  color: #ff0000;
}

Hi Kharis,

I removed all codes in Appearance > Customize > Additional CSS. Copied and pasted only the call-to-action code in there, but the Apply button didn’t work. Maybe something else caused the nav menu call-to-action code to fail?

Thanks,

Victor

Hello there,

Have you applied button-menu-item class name to your Apply menu item?

43

Regards,
Kharis

Hi Khais,

Wow. My favorite button is back. You’re the best!

Thanks!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis