Turn menu popup button as normal button

Hello all :slight_smile:

I would like to turn the menu popup button as a normal button

My website : https://ecotech-geneve.ch

Thank you for your help. Seb :slight_smile:

Hello there,

There is no option to turn off the popup effect. However, we can use regular menu item and add some styles by following the below steps:

  1. Edit your primary menu from Appearance > Menu;
  2. Expand the Screen Options at the far top right side and check to enable CSS Classes;
  3. Create a new menu item and append to the current menu;
  4. Enter β€œcontact” (without quotes) into the CSS Classes;
  5. Save.

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

    .main-navigation .contact > a:before {
      font-family: et-line;
      content: "\e004";
      display: inline-block;
      margin-right: 7px;
    }

    .main-navigation .contact > a {
      background-color: #e31e24;
      color: #fff;
      padding: 5px 15px;
      margin-left: 10px;
      cursor: pointer;  
    }

Now you can disable the current popup via Appearance > Customize > Talon Pro Options.

​I hope this reply helps.

Regards,
Kharis
aThemes Support

Hello Kharis,

It works very well :slight_smile:

How can I have the same CSS on mobile as the contact popup button ?

Thank you. Seb

Hi Seb,

Please remove the previous code and use this one instead.

    #mobile-menu li.contact > a:before,
    .main-navigation .contact > a:before {
      font-family: et-line;
      content: "\e004";
      display: inline-block;
      margin-right: 7px;
    }

    .main-navigation .contact > a {
      background-color: #e31e24;
      color: #fff;
      padding: 5px 15px;
      margin-left: 10px;
      cursor: pointer;  
    }

    #mobile-menu li.contact {
      margin-left: 15px;
    }

    #mobile-menu li.contact > a {
      display: block;
      background-color: #e31e24;
    }

Regards,
Kharis
aThemes Support