Home Forums Porto Admin Template Page header – mobile version

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 2 months, 2 weeks ago. This post has been viewed 143 times

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)