Sidebar title wrapping and scrolling

UX
1

i don’t particularly like this. navigation sidebar in drop down mode:

IMG_3301

also, in drop down mode, it doesn’t take much to make the menu have a scroll bar even if there is still desktop screen space for it to expand and not have it. can this be fixed?

menu
menu391×679 42.7 KB

my users want the drop down side bar as opposed to the expanded one because it closely resembles the old legacy hamburger menu and it’s on the right side.

and why does Everything include new and unread? those should be separate?

i also need to get that FAQ link out of there and i haven’t quite figured out the CSS for that yet.

1 Like
2

There may be more elegant or accurate solutions, and I think the sidebar will be more customizable in the future, but a potentially unreliable CSS solution would be:

.sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

image
image745×254 25.9 KB

It targets the current position of the FAQ link parent (last element -1). Having other elements between the FAQ link and the end of the list will make the CSS selector not target the proper element anymore.

But if you’re confident this part of the list won’t change, you can go for it.

1 Like
3

thanks @Canapin - i’m pretty good with CSS and use quite a bit on my forum and i’m fine with it. i hadn’t quite figured out how to target those items and i was hoping to do it without the child element code for the reason you pointed out. i used a lot of CSS to change the old legacy menu contents as well, but it was easier to get at with CSS. i actually want to manipulate that whole section under community and put things in a different order, so i suspect i’ll have to use some javascript too. i REALLY want that part to customizable for admins. thanks again for the tip! :slight_smile:

also still not really clear what “everything” is. i kinda want to rename it to be more specific. :thinking:

5

Yeah, the links container don’t have unique classes so it’s tricky to target them in the current state.

You may be interested in this: sidebarMod: Add/Remove Sidebar Links and Sections

You can look for js.sidebar.sections.community.links.everything.content in Customize → Text :slight_smile:

1 Like
6

ok that CSS code worked. i was worried it would affect the staff view of that part of the menu. thanks! :innocent:

unfortunately i cannot get the text replacement to work :expressionless:

edit: even after reloading the browser numerous times, i had to switch themes to get the text replacement to take. chrome’s caching is a pain. :woman_facepalming:

1 Like
7

i also changed the corresponding mouse-over text:

IMG_3332
IMG_3332873×143 58.2 KB

1 Like
8

so this does work to hide the faq but i have since discovered it also has the unwanted effect of hiding an element in each menu section :sweat_smile: but of course it does :woman_facepalming: :upside_down_face:

i should really just get on with it and write up a faq or delegate it to a user.

9

Ah, yes.

#sidebar-section-content-community .sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

Should be better.

1 Like
10

Hello,

You can target these also with data-link-name attribute.
e.g.

.sidebar-section-link-wrapper {
  .sidebar-section-link {
    &[data-link-name="faq"] {
      display: none;
    }
  }
}
1 Like
11

yea i was trying to use that method the first time and i had the data-link syntax wrong. i forgot the “-name” part and figured it was somehow not do-able. stupid me because that’s similar to how i did it with the old legacy menu. DOH :woman_facepalming: thank you.

just as an aside, the child[ ] method is only usable for desktop view.

1 Like
12

The problem is that all links are inside list elements that all have the exact same classes.
If you hide the link, the list element remains and takes place despite being “empty”.
Unless I’m missing something?

2 Likes
13

it will be so nice when changing the community section is fully operational in core. i did easily change the “community” title. but i’d like to change the order of elements. for example, in mobile view, the My Posts link is above Admin and Review, and therefore Review is in the … More section. my staff do not like this and i agree that mod controls should take precedence over My Posts. i should probably make a ux feature request topic but i know team is working on making that customizable to us in the future anyways.

i guess i can always hide the link to my posts and then move it to the global links section. i don’t know, i’m sure i’m trying to do too much with that menu.

1 Like
14

Yeah, I see. For these kind of problems would be cool to use the :has pseudo but it is a little limited.

.sidebar-section-link-wrapper {
  &:has(.sidebar-section-link[data-link-name="faq"]) {
    display: none;
  }
}
2 Likes