Okay
  Public Ticket #3367909
Button I meny
Closed

Comments

  •  1
    fleffefloff started the conversation
    May 11, 2023 at 10:22am

    Hi

    I can't figure out on how to hav one of the menu choices as a button. As done in one of the starter - themes https://demo.kaliumtheme.com/landing/

  • [deleted] replied
    May 11, 2023 at 11:28am

    Hi fleffefloff,

    Please try to be very specific about the question and explain it more so I can easily understand you and give you the proper answer.

    Also, please share your website login credentials with me so I can test this. To safely include your credentials click the Insert Credentials button in the editor toolbar (see how)

    Thanks!

  •  1
    fleffefloff replied
    May 11, 2023 at 12:02pm

    Sorry. Could of course have been more detailed in my question. At the moment I can't really get you log in details as we just comparing/testing out a few themes to go forward with in the upcoming project. Kalium Theme is one go the candidates. 

    On one of the example sites/themes within Kalium, we saw a menu and the last menu item on the example the menu item was styled as a button (See attached image). 

    We can't really figure out where that option is/where to apply the CSS-class or how to make it happen. We are looking for such solution without having to delve in to much into complex code/CSS production 

    Hopefully, this clears up a bit on what we are asking/looking for

    Thanks also for getting back to us. Much appreciated!

    Attached files:  Skärmavbild 2023-05-11 kl. 13.55.02.png

  • [deleted] replied
    May 12, 2023 at 7:46am

    Hi again,

    We have added a CSS class 

    get-the-app

    to that button and then we added this CSS code in the Custom CSS area:

    /* Menu: Get the App Button */
.get-the-app a {
    background: #fff;
    color: #2c3142 !important;
    border-radius: 50px;
    padding: 4px 15px;
}
/* Menu: Get the App Button on Hover*/
.get-the-app a:hover {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow all 300ms;
}
/* Menu: Get the App Button when sticky */
.site-header--sticky-active .get-the-app a {
    background: #1c66d4; 
}
/* Menu: Get the App Button when sticky */
.site-header--sticky-active .get-the-app a span {
    color: #FFF; 
}
/* Menu: Get the App Button Remove Underline */
.get-the-app a:after {
    display: none;
}
/* Menu: Get the App Button Sticky Header */
.main-header.is-sticky.sticky-fixed .get-the-app a {
    background: #2078dc;
    color: #fff !important;
}

    See video: https://d.pr/v/QSmXFg

    Have a nice weekend!