Change Sidebar Styling • BuddyBoss

Tagged: menu, mobile, sidebar

This topic has 15 replies, 3 contibutors, and was last updated 8 years, 7 months ago by Anve S..

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Question

March 31, 2016 at 5:39 pm #66365

Carly
@costyclan

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

Answers

April 1, 2016 at 12:55 am #66416

Anve S.
@anve

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

April 6, 2016 at 12:37 pm #67111

Karen Thomas
@conscious-crafties

Following this one 🙂

April 6, 2016 at 7:18 pm #67161

Carly
@costyclan

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.

April 7, 2016 at 1:51 am #67177
Anve S.
@anve
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
April 7, 2016 at 1:56 am #67178

Anve S.
@anve

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

April 9, 2016 at 9:19 pm #67567

Carly
@costyclan

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).

April 11, 2016 at 12:11 am #67665

Anve S.
@anve

Hi @costyclan,

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

Regards
Anve

April 12, 2016 at 5:31 am #67786

Carly
@costyclan

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?

April 12, 2016 at 6:12 am #67797
Anve S.
@anve
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
April 12, 2016 at 6:16 am #67798

Carly
@costyclan

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”.

April 12, 2016 at 7:35 am #67815
Anve S.
@anve
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
April 20, 2016 at 5:47 am #69018

Carly
@costyclan

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;
}
}

April 20, 2016 at 1:59 pm #69068

Anve S.
@anve

Hi @costyclan,

Please check the styling again , changes have been made.

Regards
Anve

April 20, 2016 at 4:56 pm #69080

Carly
@costyclan

Beautiful, thank you so much @anve.