Show mobile admin all the time.

What would be the css code for the branding plugin admin css to show the mobile admin all the time in the Wordpress admin area across all sites in the network? Or if there is a way to convert the admin sidebar to a hamburger drop-down that would be great as well.

Code or plugin does not matter.

Thanks

  • Sajid

    Hi Site Division,
    Hope you are doing good today :slight_smile:

    Could you please explain a little bit more with the help of screenshots if possible ?

    What you mean by mobile admin ?
    Do you want to make the administration area look like desktop version ?

    Also, WordPress dashboard does have hamburger menu while you are logged in on mobile browser.

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

    • Site Division

      Yes the mobile menu admin when on a phone or tablet. How can you show that even when on a desktop.

      I have been playing with some the code.

      @media screen and (max-width: 782px)
      #wpadminbar .ab-icon, #wpadminbar .ab-item:before {
          padding: 0;
      }
      @media screen and (max-width: 782px)
      #wpadminbar .ab-icon {
          font: 40px/1 dashicons!important;
          margin: 0;
          padding: 0;
          width: 52px;
          height: 46px;
          text-align: center;
      }
      @media screen and (max-width: 782px)
      #wpadminbar * {
          font-size: 14px;
          font-weight: 400;
          font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
          line-height: 32px;
      }
  • Sajid

    Hi Site Division,
    Hope you are doing good today :slight_smile:

    I can't tell you exact code right now but first of all here is the correct code (the above one is missing the braces and have unnecessary media queries).

    @media screen and (max-width: 782px){
    #wpadminbar .ab-icon, #wpadminbar .ab-item:before {
        padding: 0;
    }
    #wpadminbar .ab-icon {
        font: 40px/1 dashicons!important;
        margin: 0;
        padding: 0;
        width: 52px;
        height: 46px;
        text-align: center;
    }
    #wpadminbar * {
        font-size: 14px;
        font-weight: 400;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
        line-height: 32px;
    }
    }

    Secondly, if you want to modify it then the best way is to do it by overriding the default CSS instead of hijacking the existing CSS and overriding with !important rules.

    To do this I came up with following gist to remove the default admin-bar.css file and then include your custom one from active theme or child theme.

    You can use this as mu-plugin. Download the file and simply move it to wp-content/mu-plugins folder (create if not exists).
    https://gist.github.com/sjaved87/7cd83cd15b76b4206b171f89ff844d69

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.