[Solved] different CSS style class on page load for mobile and desktop [duplicate]

by


Someone has posted something similar earlier, but removed the answer, after a little bit of tinkering I got this to work. By default the sidebar doesn’t have ‘active’ class set. Also by default it is hidden for mobile, but displayed for desktop. ‘active’ class gives the ability to display the sidebar on mobile.

/* small screen, hidden by default */
@media only screen and (max-width: 770px ) {
    .sidebar {
        transform: translateY(-100%);
        transition: all .25s ease-in-out;
    }
}

/* large screen, shown by default */
@media only screen and (min-width: 771px ) {
    .sidebar {
        transform: translateY(0);
        transition: all .25s ease-in-out;
    }
    #sidebar-toggle {
        display: none;
    }
}

/* activate the menu on small screen */
.sidebar.active {
    transform: translateY(0);
    transition: all .25s ease-in-out;
}

solved different CSS style class on page load for mobile and desktop [duplicate]