15.8 Change Style of Navigation Bar

Help / Discuss
#1

Hello,

im currently in the works of creating an intranet with XWIKI (realy cool so far) but the Menu Application has three style Issues that I can’t figure out how to solve.

First issue, the menu type=“horizontal fixedWidth” makes that dropdown field have an fixed width and cut off the text which doesn’t look good. How do I increase the fixedWidth so that my words fit in?

Second Issue is, that the Menu bar has an upper smooth/rounded border that I want to get rid of, as I try to make an modern/flat looking styling.

XwikiMenuStyleIssues_1-2

Also as workaround for the first issue I changed to menu type=“horizontal” now every section is below each other and has an auto width to fit everything in. This fixes the cutoff issue but creates a new one: As each dropped down section/level has an padding, as soon as the mouse goes over the padding, it colapses the level below it which is very annoying to use.

Where can I change what CSS values to fix these things?

#2

For the second issue your can use the CSS

.menu.menu-horizontal {
  box-shadow: none !important;
}

(I couldn’t find quickly a way to get enough rule priority without !important but if you can find a way to avoid using this hack it’ll be more stable :+1: )

You can use this CSS in a Stylesheet Extension or the Advanced section of the color theme you’re using :slight_smile:

See also → Track: Styling XWiki - XWiki

Have a good day!
Lucas C.

1 Like
#3

Thank you very much that worked and the navigation Menu looks nicely flat now!

Also thanks to your CSS modifcations I found out how to “solve” my “issue” number 3 with the padding.
But now that I got rid of the padding, I found out, that modifying the menu type seems not to be a valid workaround for the width in issue number 1, as it creates a lot more problems. So issue number 1 has to be solved somehow else and issue number 3 is no real issue.

#4

image

The screenshot above is done on a XWiki 15.9-SNAPSHOT, but AFAIK there was no changes to the Menu UI recently so it should be the same as yours. Here we can see that the overflow is not cut off but wrapped on a new line.

…
Maybe it’s related to word length, checking…
image
It’s not cutting off the same way as it does on your screenshot, but it’s also wrong :eyes: …
Opening a ticket on it, this is not the expected behaviour.
https://jira.xwiki.org/browse/XWIKI-21464

For the time being, you can probably ‘hard-code’ a fix for yourself:

  • using some nth child CSS selectors to force the width on this section and subsections

OR

  • remove/reduce the padding in .menu.menu-horizontal > ul ul li.xDropdown so that the title fits in

Thanks!
Lucas C.

1 Like