Important:
This support area is for Kalium 3 users only. Support for Kalium 4 has moved to our new platform at support.laborator.co. If you’re using Kalium 4, please create a new account there using your email and license key. A password will be sent to you automatically.

Okay
  Public Ticket #1995199
Cannot make Menu Button
Closed

Comments

  •  2
    weiweilee started the conversation
    May 1, 2019 at 4:25pm

    Hi there

    I Cannot make a menu button,

    i've tried:
    1.add css style to the php sheet like this

    2. add css to menu  like this

    but didn't work , maybe overwrite by other code but don't know how to detect...

    help ~plz

  • [deleted] replied
    May 2, 2019 at 8:03am

    Hi weiweilee,

    First you must add a class to your menu item, to learn how you can do that please see this video.

    Then you can go to Custom CSS area and style that button.

    Here is an example that we used for the Restaurant demo:

    /* Menu: Special button */
@media screen and (min-width: 768px) {
    .special-menu-button a{
        -webkit-box-shadow: 0 10px 30px 3px rgba(0,0,0,0.08);
        box-shadow: 0 10px 30px 3px rgba(0,0,0,0.08);
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        padding: 4px 15px;
        background: #d09e5b;
        color: #fff !important;
        margin-left: -15px;
    }
    
    .special-menu-button a:after {
        background-color: transparent !important;
    }
}

    Have a great day!

  •  2
    weiweilee replied
    May 2, 2019 at 10:53am

    Hi there

    it worked,  thanks
    but here comes another question,
    how could I remove the hovered bottom-line to this button?


    I used "border-bottom: none !important;" but didn't worked


    thanks

  • [deleted] replied
    May 3, 2019 at 7:35am

    Hi weiweilee,

    I'm happy to hear thatsmile.png

    The second CSS code that I send to you:

    .special-menu-button a:after {
    background-color: transparent !important;
}

    Removes that underline effect for the "special-menu-button" class button.

    Have a great day!

  •  2
    weiweilee replied
    May 3, 2019 at 5:08pm

    Hi Ylli

    It didn't work ,

    plz check my website
    http://voxnativa.org/

    and My CSS:

    butn a {
    -webkit-box-shadow: 0 10px 30px 3px rgba(0,0,0,0.08);
    box-shadow: 0 10px 30px 3px rgba(0,0,0,0.08);
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    padding: 10px 25px;
    border: solid 2px #ffffff;
}
.butn a:after {
    background-color: transparent !important;
}
}
  • [deleted] replied
    May 6, 2019 at 7:11am

    Hi weiweilee,

    Please read my reply carefully and see the video, the class that I used was:

    .special-menu-button

    Thanks!

  •  2
    weiweilee replied
    May 6, 2019 at 4:52pm

    Hi Ylli

    I change the class to .

    .special-menu-button

     now my css style is :

      .special-menu-button a{
            -webkit-box-shadow: 0 10px 30px 3px rgba(0,0,0,0.08);
            box-shadow: 0 10px 30px 3px rgba(0,0,0,0.08);
            -webkit-border-radius: 40px;
            -moz-border-radius: 40px;
            border-radius: 40px;
            padding: 10px 25px;
    border: solid 2px #ffffff;
        }

    .special-menu-button a:after {
        background-color: transparent !important;
    }
    }

    but it still have bottom line link 

    (sorry ,  my code skill is pretty bad )


    plz help


  • [deleted] replied
    May 7, 2019 at 6:54am

    I can see that you used two }.

    This should be the exact code https://laborator.ticksy.com/ticket/1995199#comment-10167639

    If you still have problems to do this simple thing then please send me your Wordpress credentials so I can test this.

    Have a great day!

  •   weiweilee replied privately
  • [deleted] replied
    May 8, 2019 at 8:25am

    Hi weiweilee,

    I can see that your button works as it should now and it's taking the style that I have send to yousmile.png

    Have a great day!

  •  2
    weiweilee replied
    May 8, 2019 at 11:01am

    Hi Ylli

    The menu button hovered now  is  pic,

    but I want it to be pic. (I don't wanna red line under button when I hover)

    it still not as I thought,

    would you plz help me fix this 

    thanks

  • [deleted] replied
    May 9, 2019 at 7:03am

    Hi weiweilee,

    Thanks for your infos, now I understand your question and I'm happy to say that the problem is now solve (see video).

    Have a great day!

  •  2
    weiweilee replied
    May 9, 2019 at 7:06am

    Hi Ylli

    you got it !!

    thank you so much ^__^

  • [deleted] replied
    May 9, 2019 at 7:12am

    Hi weiweilee,

    I'm happy to hear thatsmile.png

    Will set this ticket as solved from here.