Page header – mobile version

Home Forums Porto Admin – Responsive HTML5 Template Page header – mobile version

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10027069
    TomaszF
    Participant

    Welcome,
    Thank you for your help so far, you are always able to solve my problems 🙂

    I am currently testing Porto Admin on a tablet. I have a problem with the top menu. On a PC, everything is displayed correctly in one line. However, when I reduce the page size to tablet, the menu will decrease and divide into two lines. I would like the second line (Witaj, To..) and icons with mail and alerts) not to be visible. I would like it to move (only on tablet view !) this elements to the first line (to the right next to the menu expansion icon). Every place on the tablet is important vertically, and this line takes up valuable space.

    menu mobile

    I greet you,
    Tomek

    Translated with http://www.DeepL.com/Translator


    #10027075
    Support2
    Keymaster

    Hello Tomek :),  

    To do this, you need change a little the html structure of your code. You can use this as an example: https://pastebin.com/raw/H2d7R4Hd
    Basically you need put the “header-right” inside the “logo-container”.

    After go to your file (css/custom.css) and paste this css code:

    @media (max-width: 767px) and (min-width: 485px) {
        .header .header-right {
            background: transparent !important;
            float: right !important;
            width: auto !important;
            margin-top: 0 !important;
            height: 56px !important;
            margin-right: 50px;
        }
        .notifications {
            margin: 16px 8px 0px 40px !important;
        }
        .userbox:after {
            top: -23px !important;
        }
        .userbox .name, .userbox .role {
            max-width: 94px;
        }
        .inner-wrapper {
            margin-top: 56px;
        }
    }
    
    @media (max-width: 485px) {
        .header .header-right {
            margin-top: 0 !important;
        }
        .userbox:after {
            height: 60px !important;
            top: -16px;
        }
        .inner-wrapper {
            margin-top: 112px;
        }
        .sidebar-title {
            margin-top: 56px;
        }
        .userbox .name, .userbox .role {
            max-width: 94px;
        }
    }

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

    Kind Regards,

    Rodrigo.


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

This topic is marked as "RESOLVED" and can not rceive new replies.