Buddy press mobile menu

[Todd]

How do I change the mobile menu for the buddypress tabs. User’s on a mobile device have a hard time seeing that is a menu. Any CSS I can add to change the colors to make it stand out?

 

Is there also a way I can change it so it doesn’t compress to the 1 button, maybe just have them stack vertically?

 

Thanks!

[Radu]

Hi, Use the next css to make there for few icons then the more button will be displayed highlited.

@media(max-width:991px) {
    
    #buddypress div.item-list-tabs ul {width: auto !important;}
    #buddypress div#item-nav {padding: 0;}
    #buddypress div#item-nav ul li {opacity:1 !important;}
    #buddypress div#item-nav .responsive-tabs {height: 102px !important;}
    #buddypress div#item-nav ul li a:before { margin-bottom: 10px !important;}
    #buddypress div#item-nav ul li a {padding: 0 7px;font-size:10px;}
    #buddypress div#item-nav ul li a:before {font-size:44px;}
    #buddypress div#item-nav  a.dropdown-toggle:before {
        background-color: #777 !important;
        color: #fff !important;
    }

}

The last selector targets only the more button so if you need to highlite only more button copy and paste only that css The css will be added to wp-admin -> theme options -> General settings -> Quick CSS Cheers R

[Todd]

Not marked as solution

[Radu]

Not marked as solution

[Author]

Posts