Home Forums Porto Admin Template Change navigation class on window resize

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10029994
    mjackz
    Participant

    Hi there,
    Im trying to set navigation depending on windows size, i saw that this can be changed adding a class on html tag

    Have something like this:

    
    (function($) {
        let $window = $(window),
            $html = $('html');
    
        function resize() {
    
            $html.removeClass('sidebar-left-xs').removeClass('sidebar-left-big-igons').removeClass('sidebar-collapsed');;
    
            if ($window.width() >= 1200) { return $html('sidebar-left-xs'); }
            if ($window.width() < 1200) { return $html.addClass('sidebar-left-big-igons'); }
            if ($window.width() < 992)  { return $html.addClass('sidebar-collapsed'); }
    
        }
    
        $window
            .resize(resize)
            .trigger('resize');
    })(jQuery);
    

    This seems to work with the navigation but the main area dont resize accordingly.
    To what other tags do i need to add remove classes?

    Is there an easy way to do this?
    TIA,
    Manuel



    Template Version: 2.1.1
    #10029995
    Support2
    Keymaster

    Hello,

    Your code is correctly, just the class sidebar-left-big-igons you need change to sidebar-left-big-icons.

    Hope this helps.

    Kind Regards,

    Rodrigo.


    #10030001
    mjackz
    Participant

    Doh, typos… tometo tomato
    I also also saw left-sidebar-collapsed and changed inner-wraper class positioning

    Thanks,

    
    if ($window.width() >= 1200)  // xl >
                return $html.addClass('sidebar-left-xs')
                            .removeClass('sidebar-left-big-icons')
                            .removeClass('sidebar-left-collapsed');
    
            if ($window.width() >= 992 && $window.width() < 1200 )  // lg > xl
                return $html.addClass('sidebar-left-big-icons')
                            .removeClass('sidebar-left-xs')
                            .removeClass('sidebar-left-collapsed');
    
            if ($window.width() < 992)  // < lg
                return $html.addClass('sidebar-left-big-icons').addClass('sidebar-left-collapsed');
    

    #10030010
    Support2
    Keymaster

    Hello,

    Great!

    If you need further assistance, feel free to contact us.

    Kind Regards,

    Rodrigo.


Viewing 4 posts - 1 through 4 (of 4 total)