0

I have two div classes:

<nav class="side-navbar shrinked">
<div class="content-inner active">

but when it comes to mobile devices and when the pages loads, I want to remove shrinked and active from my classes and it should display like this: 

 <nav class="side-navbar">
 <div class="content-inner">

This is my script and I also tried adding some code to remove those classes,but it's not working:

// Sidebar Functionality
// ------------------------------------------------------ //
$('#toggle-btn').on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass('active');

    $('.side-navbar').toggleClass('shrinked');
    $('.content-inner').toggleClass('active');
    $(document).trigger('sidebarChanged');

    if ($(window).outerWidth() > 1183) {
        if ($('#toggle-btn').hasClass('active')) {
            $('.navbar-header .brand-small').hide();
            $('.navbar-header .brand-big').show();
        } else {
            $('.navbar-header .brand-small').show();
            $('.navbar-header .brand-big').hide();
        }
    }

    if ($(window).outerWidth() < 1183) {
        $('.navbar-header .brand-small').show();

    }


});
// ------------------------------------------------------- //
// Remove classes (but its not working)
// ------------------------------------------------------ //
$(window).load(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 600) {
        $(".side-navbar shrinked").removeClass("shrinked");
        $(".content-inner active").removeClass("active");
    }
});


I ready in comments ,where we can solve this with CSS Media queries , and there is my HTML : 

<div class="page-content d-flex align-items-stretch">
    <!-- Side Navbar -->
    <nav class="side-navbar shrinked">
        <!-- Sidebar Header-->
        <div class="sidebar-header d-flex align-items-center">
            <div class="avatar"><img src="~/assist_Admin/img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>
            <div class="title">
                <h1 class="h4">@Session["Email"]</h1>
                <p>Administrator</p>
            </div>
        </div>
        <!-- Sidebar Navidation Menus--><span class="heading">Værktøjer</span>
        <ul class="list-unstyled">
            <li class="active"><a href="/User/Forside"> <i class="icon-home"></i>Hjem </a></li>
            <li> <a href="/User/AllEmails"> <i class="icon-mail"></i>Email List </a></li>
            <li>
                <a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Tilføj </a>
                <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
                    <li><a href="/User/AddUser">Tilføj brugere</a></li>
                    <li><a href="/User/AddEmployee">Tilføj medarbajder</a></li>

                </ul>
            </li>

        </ul><span class="heading">Ekstra</span>
        <ul class="list-unstyled">
            <li> <a href="#"> <i class="icon-flask"></i>Facebook </a></li>
            <li> <a href="#"> <i class="icon-screen"></i>Linkedin </a></li>
            <li> <a href="#"> <i class="icon-mail"></i>Web Shop </a></li>

        </ul>
    </nav>

    <div class="content-inner active">

        <!-- Page Footer-->
        <footer class="main-footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        <p>Ed Admin &copy; 2017-2019</p>
                    </div>
                    <div class="col-sm-6 text-right">
                        <p>Design by <a href="" class="external"></a></p>

                    </div>
                </div>
            </div>
        </footer>
        @RenderBody()
    </div>
</div>
HellorhighWater
  • 15
  • 6
  • 3
    why don't you use media query? – Prajwal Jan 16 '18 at 09:40
  • @Prajwal would give me an example :) – HellorhighWater Jan 16 '18 at 09:41
  • 1
    CSS media queries is *by far* the best way to achieve what you need. We'd need to see your HTML to show you how to do it exactly, though. – Rory McCrossan Jan 16 '18 at 09:44
  • @media screen and (max-width 1183px) { .navbar-header .brand-smal{ display: none; } } sample above will hide .navbar-header .brand-smal if screen size is below value, also you don't have to deal with onload events and resize events, as well as screen rotations. – Raimonds Jan 16 '18 at 09:45
  • you have not selected your class right. `.side-navbar shrinked` sholud be `.side-navbar.shrinked` and same `.content-inner active` should be `.content-inner.active` at the last – Bhuwan Jan 16 '18 at 09:56
  • @RoryMcCrossan i just update my Question with My HTML :) – HellorhighWater Jan 16 '18 at 10:18

1 Answers1

2

change the script to this

$(document).ready(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 600) {
        $(".side-navbar.shrinked").removeClass("shrinked");
        $(".content-inner.active").removeClass("active");
    }
});

Your selector is wrong.

Until and unless you have something to do with JavaScript, (like Open & close menu or add/remove some navigation) I would suggest you to go with CSS Media Queries.

@media (max-width: 12450px) { 
.navbar{
   color:red;
   }
}

Please refer MDN on how to use it. Reference Link

Edit:

I've changed the $(window).load() to $(document).ready(). Check this question for more details.

Prajwal
  • 3,930
  • 5
  • 24
  • 50