Home Forums Porto Admin Template how to move the left side big icon to the right side on the page Media Gallery

This topic contains 4 replies, has 2 voices, and was last updated by  roma44ka 1 week, 3 days ago. This post has been viewed 87 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10028197

    roma44ka
    Participant

    In the past you gave me the following CSS:

    /* Add here all your CSS customizations */

    html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li ul.nav-children {
    right: 100%;
    left: auto;
    min-width: 210px;
    border-right: 3px solid #2f3139;
    }

    @media(min-width: 768px) {
    .header {
    z-index: 9999;
    }

    .sidebar-left {
    order: 2;
    }

    html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li ul.nav-children li.nav-parent > a:after {
    content: ‘\f104’;
    right: auto;
    left: 5px;
    }

    html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li ul.nav-children li.nav-parent > a {
    padding-left: 30px;
    padding-right: 0;
    }

    html.sidebar-left-collapsed .sidebar-left .sidebar-title {
    pointer-events: none;
    }
    }

    which is working perfectly on the page side bar big icons, but I want to achieve the same on the page “Media Gallery” I need the big icons on the left and the media gallery on the right side. which is not working for me.

    Media Gallery with Sidebar Big Icons

    Thanks in advance!


    #10028211

    Support3
    Keymaster

    Hi 🙂

    To do that, first go to your (pages-media-gallery.html) file and where

    <html class="fixed sidebar-left-collapsed sidebar-left-with-menu">

    change to :

    <html class="fixed sidebar-left-collapsed sidebar-left-with-menu sidebar-left-big-icons">

    after go to (css/custom.css) and past :

    html.sidebar-left-big-icons.sidebar-left-with-menu:not(.sidebar-right-opened):not(.scroll) .inner-menu {
        left: auto !important;
        right: 0;
    }
    
    html.sidebar-left-big-icons.sidebar-left-with-menu.sidebar-left-collapsed:not(.sidebar-right-opened):not(.scroll) .content-with-menu .inner-toolbar {
        left: 55px !important;
        right: 300px;
    }
    
    html.sidebar-left-big-icons.sidebar-left-with-menu:not(.sidebar-right-opened):not(.scroll) .content-with-menu .inner-toolbar {
        left: 152px !important;
        right: 300px;
    }
    
    html.sidebar-left-big-icons.sidebar-left-with-menu.sidebar-left-collapsed:not(.scroll) .inner-body {
        margin-left: auto !important;
        margin-right: 300px;
    }
    html.sidebar-left-big-icons.sidebar-left-with-menu:not(.sidebar-right-opened):not(.scroll) .inner-body {
        margin-left: 152px;
        margin-right: 300px;	
    }
    
    html.fixed .content-body {
        margin-left: auto;
    }

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Otávio.


    #10028217

    roma44ka
    Participant

    Thanks a lot!
    it’s almost perfect I need the left side big icon navigator to be also on the right side, Thanks!!!


    #10028218

    Support3
    Keymaster

    Oh Sorry, I had understood that you wanted the big icon on the left and the media gallery on the right.

    Anyway please redo the last steps just by changing the step by putting in this (css/custom.css) this code instead :

    html.sidebar-left-big-icons.sidebar-left-with-menu.sidebar-left-collapsed:not(.sidebar-right-opened):not(.scroll) .inner-menu {
        left: auto !important;
        right: 55px;
    }
    
    html.sidebar-left-big-icons.sidebar-left-with-menu:not(.sidebar-right-opened):not(.scroll) .inner-menu {
        left: auto !important;
        right: 125px;
    }
    
    html.sidebar-left-big-icons.sidebar-left-with-menu.sidebar-left-collapsed:not(.sidebar-right-opened):not(.scroll) .content-with-menu .inner-toolbar {
        left: 0 !important;
        right: 355px;
    }
    
    html.sidebar-left-big-icons.sidebar-left-with-menu:not(.sidebar-right-opened):not(.scroll) .content-with-menu .inner-toolbar {
        left: 0 !important;
        right: 425px;
    }
    
    html.sidebar-left-big-icons.sidebar-left-with-menu.sidebar-left-collapsed:not(.scroll) .inner-body {
        margin-left: 0 !important;
        margin-right: 350px !important;
    }
    html.sidebar-left-big-icons.sidebar-left-with-menu:not(.sidebar-right-opened):not(.scroll) .inner-body {
        margin-left: 0;
        margin-right: 425px;
    }
    
    html.fixed .content-body {
        margin-left: 0px !important;
    }
    
    @media only screen and (min-width: 768px) {
        html.fixed .sidebar-left {
            left: auto !important;
            right: 0;
        }
    
        html.sidebar-left-big-icons.sidebar-left-with-menu.sidebar-left-collapsed:not(.sidebar-right-opened):not(.scroll) .page-header {
            left: 0;
            right: 55px;
        }
    
        html.sidebar-left-big-icons.sidebar-left-with-menu:not(.sidebar-right-opened):not(.scroll) .page-header {
            left: 0;
            right: 152px;
        }
    }

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Otávio.


    #10028219

    roma44ka
    Participant

    Thanks! everything is perfect!
    Your support is amazing! I have bought the client side theme as well 🙂


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