different CSS style class on page load for mobile and desktop

Question

I am trying to create a sidebar menu for my front-end, where the menu should show by default on the desktop, but start hidden on mobile. The 'active' class shown below handles the transition between show/hide. The sidebar works, when I click the 'hamburger' button on the phone, it displays or hides the menu just as it should.

CSS:

.sidebar {
    transform: translateY(-100%);
    transition: all .25s ease-in-out;
}

.sidebar.active {
    transform: translateY(0);
    transition: all .25s ease-in-out;
}

JS:

$("#sidebar-toggle").click(function () {
    $(".sidebar").toggleClass("active");
});

The menu has 'active' class by default for the desktop, so it is showing unless user hides it, the problem appears when I try to hide the menu after page loads on mobile devices:

$(document).ready(function () {
    if ( window.innerWidth >= 770 )
    { $(".sidebar").addClass("active"); }
    else
    { $(".sidebar").removeClass("active"); }
});

However, when browsing the app on the phone, you can see the menu disappearing every time you refresh a page. How can I set the sidebar to be 'active' on desktops, but not on mobile devices by default without using JS?

UPDATE: since it looks like some people are having troubles understanding what's going on, I will try to clarify once again, now using just simple sentences:

I want my sidebar TO HAVE 'active' class by default on desktop (min-size > 770). I also want my sidebar NOT to have 'active' class by default on mobile (min-size < 770). This I can't do. I can only set the sidebar to be active ALL the time. I also can remove or add the class based on the screen size. The JS provided above does this. However this happens after the page loads. The result (on a mobile) is a sidebar that appears on every refresh/redirect, and then transitions. I do not want it to be active on refresh/redirect and then transit away. I want it to be inactive from the start on the phone. But active on the desktop.

UPDATE2: I really hope this is easier to understand: I want to create the sidebar with 'active' class on desktops, but WITHOUT the 'active' class on mobiles. I do not want to start with 'active' class and then remove it with JS after the page loads, that's what I do now. I want the sidebar to start without the active class - BUT only on mobile.

no... I know how to target screens by size, I don't know how to apply a CSS class (active) for a specific size only — SEnergy, Dec 13 '18 at 11:27
Wouldn't using the media Query effectively add the CSS class specifically to that size ? example : `@media (max-width:500px) .sidebar.active { transform: translateY(0); transition: all .25s ease-in-out; }` would apply only to devices with width smaller than 500px — dream88, Dec 13 '18 at 11:29
Your question was `How can I set the sidebar to be 'active' on desktops, but not on mobile devices by default without using JS`, the answer to that question already exists. This is called being a duplicate. No need to be rude. — Alexandre Elshobokshy, Dec 13 '18 at 11:38
@IslamElshobokshy you see, you just read the title, but the problem is explained in the thread itself, not the title. — SEnergy, Dec 13 '18 at 11:45
Well, if you want clients to receive different markups depend on screen size, then this is not the client problem, but server. You should detect mobile devices with HTTP-headers and add or not add necessary class to markup ON SERVER. — Limbo, Dec 13 '18 at 11:53
Don't blame other users for that they do not understand you. They provided you client-side solutions, but nothing satisfied you. So, probably, there two ways: 1. The problem is unsolvable (pretty much) 2. The problem is not on frontend's own. — Limbo, Dec 13 '18 at 11:57
I recommend you to see this:https://css-tricks.com/responsive-menu-concepts/ — I_Al-thamary, Dec 13 '18 at 12:06
@LevitatorImbalance all Islam did was redirect me to a thread I found yesterday, without properly reading the issue. The solutions they 'provided' weren't solutions to my problem at all, what they provided were the last steps I took when creating this sidebar and had pretty much very little to nothing with the issue itself — SEnergy, Dec 13 '18 at 12:13
Seems like you did not even read my comment, or did not try to understand, what I said — Limbo, Dec 13 '18 at 12:20
You said it works on the phone. So, the problem is that the ` window.innerWidth ` doesn't give the real window width so you need to calculate the window width http://mauzon.com/how-to-get-real-window-width/comment-page-1/ Also, see these : https://stackoverflow.com/questions/18546067/why-is-the-window-width-smaller-than-the-viewport-width-set-in-media-queries https://codepen.io/nilbog/pen/obKie — I_Al-thamary, Dec 13 '18 at 12:23

score 1 · Accepted Answer · answered Dec 13 '18 at 12:47

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;
}

Yahya Khalil · Answer 2 · 2019-01-08T12:49:13.677

-1

/* apply hide the element when width larger than 770px */    
@media (max-width: 770px) {
   .sidebar.active {
      display:none;
   }
}

edited Jan 08 '19 at 12:49

answered Dec 13 '18 at 11:37

Yahya Khalil

24
4

4

Welcome to Stack Overflow! While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Kurt Van den Branden Dec 13 '18 at 13:01

different CSS style class on page load for mobile and desktop

2 Answers2