"Link on top of header" (#3392624) / Laborator Support

Comments

shirleybates started the conversation
June 14, 2023 at 2:03pm
Hi I'm looking to add 2 links to other sites to advertise a few new services we have to offer - is there an easy way to do that above the header?
Thanks,
Shirley
shirleybates replied
June 14, 2023 at 2:17pm
looking to add a link similar to get the app button on this page https://demo.kaliumtheme.com/landing/

[deleted] replied

June 15, 2023 at 6:59am

Hi shirleybates,

We have added this 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 for more info: https://d.pr/v/QSmXFg

Have a nice day!

1 Like