Change Sidebar Styling

[Carly]

I would like to change colors / styling of sidebar menu mobile?
Also, how can I change the menu items for profile on mobile menu? I want to simplify it without the headings/subheadings.
Thank you

[Anve S.]

Hi @costyclan ,

Please specify the changes that you are looking for in sidebar. Also please attach a screenshot of how you want to change the menu items on mobile.

Regards
Anve

[Karen Thomas]

Following this one 🙂

[Carly]

I would like the sidebar menu on mob to just be black background with white text and only the first level menu items (wall, profile, notifications, messages, my contacts, follow, settings, media)
screenshot attached shows it as it is now.

Also, when using desktop version and minimising down so that mobile layout activates, the menu’s do not open. They work on mobile but not desktop when screen size is reduced.

[Anve S.]

HI @costyclan,

Try adding following css in child theme custom css option.

@media screen and (max-width:480px){
#wpadminbar .ab-submenu > .menupop > a.ab-item {
  color: #fff !important;
}
div#wpadminbar ul,#mobile-right-panel {
  background-color: black !important;
}
#mobile-right-panel #menu-main li a {
  color: #fff!important;
}
}

Regards
Anve

[Anve S.]

Hi @costyclan,

I check on mozilla by resizing your website , at 480px , mobile layout activates . The left and right panels are working on click . Please see attached screenshot.

Regards
Anve

[Carly]

perfect @anve, looks great and working for me now too.
How can I change menu items in profile? I only want the main items (but don’t want them highlighted in grey) just menu items as per desktop version (as per attached screenshot).

[Anve S.]

Hi @costyclan,

Please explain what changes you need to make in profile dropdown , it’s not clear to me.

Regards
Anve

[Carly]

Hi @anve, it’s not the profile dropdown on desktop I’m trying to change but the profile menu on mobile. I want the same main items that show in desktop (screenshot 1) to show in mobile (screenshot 2) I don’t want to see all the 2nd level menu items as I feel it’s a little overwhelming.
So mobile profile menu will be all black with white text and just these menu items;
Wall
Profile
Notifications
Messages
My contacts
Follow
Settings
Media

Does that help explain it better?

[Anve S.]

Hi @costyclan,

Try adding following css in child theme custom css option.

@media screen and (max-width:480px){
#wpadminbar #wp-admin-bar-my-account-buddypress li .ab-sub-wrapper {
    display: none;
}
#wpadminbar #wp-admin-bar-my-account-buddypress li a {
    background-color: #000!important;
    color: #fff;
    cursor: pointer;
}
}

Regards
Anve

[Carly]

thanks @anve, that has worked however there is just one more 2nd level menu item showing (Media>Photos). I use Rtmedia plugin. I just want to remove the ‘Photos’ 2nd level menu and just have ‘Media”.

[Anve S.]

Hi @costyclan,

Try adding following css in child theme custom css option.

@media screen and (max-width:480px){
#wpadminbar #wp-admin-bar-my-account-default li .ab-sub-wrapper {
    display: none;
}
#wpadminbar #wp-admin-bar-my-account-default li a {
    background-color: #000;
    cursor: pointer;
}
}

Regards
Anve

[Carly]

Hi @anve

I’m still struggling to get the sidebar styled. Am I supposed to add all three lots of code you provided or just the final one? The final one on its own didn’t change anything and returned the menu to default.
I’ve attached a screenshot of exactly what else needs to be changed and this is the code I have added:

@media screen and (max-width:480px){
#wpadminbar #wp-admin-bar-my-account-buddypress li .ab-sub-wrapper {
display: none;
}
#wpadminbar #wp-admin-bar-my-account-buddypress li a {
background-color: #000;
cursor: pointer;
}
}

[Anve S.]

Hi @costyclan,

Please check the styling again , changes have been made.

Regards
Anve

[Carly]

Beautiful, thank you so much @anve.