# On mobile, plugin menu occludes content

**URL:** https://meta.discourse.org/t/on-mobile-plugin-menu-occludes-content/67089
**Category:** UX
**Tags:** pr-welcome
**Created:** [July 29, 2017, 11:59pm UTC](https://meta.discourse.org/t/on-mobile-plugin-menu-occludes-content/67089 "2017-07-29T23:59:21Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![barryvan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barryvan/32/82635_2.png) [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [July 29, 2017, 11:59pm UTC](https://meta.discourse.org/t/on-mobile-plugin-menu-occludes-content/67089/1 "2017-07-29T23:59:22Z")

</div>

This is, of course, not a huge issue; I understand that using advanced plugins on a phone is likely not the best idea. 😉

 ![Screenshot_20170730-075520](https://global.discourse-cdn.com/meta/original/3X/b/3/b37adec6e9659d8182968e2c046d9a244eb60411.png)

This is on a pinned-to-home Chrome tab on a Sony Xperia Z5 Premium (inhale) with the display scaling tweaked to have a lower dppx ratio; not sure of CSS pixel dimensions, sorry.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [July 30, 2017, 12:00am UTC](https://meta.discourse.org/t/on-mobile-plugin-menu-occludes-content/67089/2 "2017-07-30T00:00:42Z")

</div>

The admin area isn’t mobile friendly and is really meant to only be utilized via desktop/tablet.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [July 30, 2017, 12:45am UTC](https://meta.discourse.org/t/on-mobile-plugin-menu-occludes-content/67089/3 "2017-07-30T00:45:09Z")

</div>

With the exception of flag handling which should work well on mobile.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [July 31, 2017, 4:31pm UTC](https://meta.discourse.org/t/on-mobile-plugin-menu-occludes-content/67089/4 "2017-07-31T16:31:25Z")

</div>

I am putting a #pr-welcome on this in case anyone feels like improving the mobile admin stylesheet.

---

<div class="post-metadata">

### Author: ![barryvan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barryvan/32/82635_2.png) [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [August 4, 2017, 4:46am UTC](https://meta.discourse.org/t/on-mobile-plugin-menu-occludes-content/67089/5 "2017-08-04T04:46:18Z")

</div>

I’ve not had a chance to put together a PR for this, but I’ve fixed it on my own site with custom CSS for now:

```css
.admin-nav {
    position: static;
    float: none;
    width: 100%;
    font-size: 80%;
    margin: 0;
}

.admin-nav .nav-stacked {
    display: flex;
    flex-wrap: wrap;
}

.nav-stacked li {
    padding: 0;
    margin: 0;
}

.nav-stacked li a {
    padding: 5px 10px;
    font-size: 100%;
    line-height: auto;
}

.nav-stacked .active > a::after, .nav-stacked li > a.active::after {
    content: none;
}

.admin-detail {
    padding: 0;
}

```

…which produces something like this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/4/74851303cc31392575746f6faf6f11de7c915278.png)