Can't Close Admin Bar on Mobile Site

  • Is anyone experiencing this issue: when viewing my site on a mobile device, I can click the logged in user avatar to view the admin bar but I am unable to close the admin bar. I would expect that clicking on the avatar again would “toggle” the admin bar closed but instead it takes me to edit my profile. I’m not sure if this is a bug or if this is intended. Either way, I would like the menu to be closed when the user clicks on their avatar as there is already an option below to edit their profile in a separate link. Also, since the menu is not able to be closed, they must click on one of the links in order to get out of it causing an extra and unnecessary page navigation/refresh.

    Would someone please tell me if this is a bug or if this is just how the adminbar works? Does anyone have a fix for this? I would assume the solution would involve jQuery.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Howdy,

    While that is not a bug, you can probably get the behavior you want.

    If you put the following line in your theme’s functions.php file:
    add_filter(‘show_admin_bar’, ‘__return_false’);

    This will:
    a. Hide the admin bar on the frontend
    b. Still show the admin bar on the backend / dashboard

    Does this get you what you need?
    Please let me know if this works out.

    Thread Starter MsRoamingHeart

    (@msroamingheart)

    Hello thank you for your fast reponse. Actually no that is not what I’m looking for. I have styled the admin bar to match my theme and added Material Design Icons to each of the links. The admin bar is a key element for my user’s buddypress navigation. I have also removed some of the elements such as the WordPress logo and link to my site, etc so my adminbar actually looks pretty good if I do say so myself. The only issue is as I mentioned: on a mobile device the user has no way of closing the menu if they wish to back out of it. They must click on one of the links which is not very intuitive.

    Thread Starter MsRoamingHeart

    (@msroamingheart)

    I found out what the problem was and have found an interim solution though I am still interested in a jQuery solution that hides the menu when the avatar is clicked and will look into it further.

    First let me clarify by saying I don’t want the entire adminbar hidden as I was using that term before, I merely want the drop down list of links hidden which appears when the avatar is clicked.

    The issue I was having was caused by having the #wpadminbar element with a fixed position to the top of the page. When the position is not fixed, the user is able to scroll down and click on any open space outside of the adminbar in order to close it. Another issue my fixed admin bar was causing was that the drop down was larger than the screen on my phone and certain links at the bottom of the menu were being cut off so that the user could not navigate to those pages. Also, because the height of the menu was greater than my screen, the user would not be able to click on any free space outside of the menu in order to close it.

    Therefore what I did was to set the following CSS

    #wpadminbar .ab-sub-wrapper {
    max-height: 350px !IMPORTANT;
    overflow: auto !IMPORTANT;
}

    the .ab-sup-wrapper is the unit that contains the links. With this interim solution, some links are cut off but they are able to be reached by scrolling through the menu. Also, the menu does not take up the entire height of my device allowing users to click out of it. I have the above CSS set for media screens 400px and less.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Can't Close Admin Bar on Mobile Site’ is closed to new replies.