How to pin the navigation bar at the top?

Help / Discuss
#1

How to fix the navigation bar at the top? So that when scrolling thoughgh the pages, the navigation bar always remains locked. Thanks.

#2

Did you upgrade to Xwiki 10.8.1 recently?

If so, have a look at https://forum.xwiki.org/t/after-the-update-page-navigation-disappeared/3754.

Maybe you’re experiencing the same problem.

#3

I meant that the navigation bar was fixed and remained on the screen when scrolled.

#4

Could you post some screenshots/video?

#5

Ah, I totally got you wrong, sorry. I thought you meant “fix” in the sense of “repair”, not in the sense of “to pin” / “position statically”.

I think he looks for a way to “pin” the breadcrumb bar to the top of the browser window, so it becomes a non-scrolling element which is always visible.

So he probably has no video, and it’s a bit difficult to show on static screenshot mockups.

#6

xwikiNavBar

#7

Exactly! Oh, my bad english))) I’m from Russia.

#8

ok thanks for the screenshot, it’s clear now.

So this isn’t supported out of the box right now but you could make this work by setting the right CSS I guess.

I know that @evalica worked on this topic, maybe she can provide some feedback/link to her investigation?

#9

What exactly? Where can I emded CSS code?

#10

Try googling for “XWiki CSS” and on the xwiki.org site… If you don’t find after a few days, post back what you did and we can discuss why it’s not discoverable. It’s important to note that we’re not many here so you also need to try searching/solving your issues by yourself (and helping others when you can too ;)).

#11

OK, I understand.

#12

so could add an SSX (https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/#HMinimalStyleSheetextension) or add the CSS in your custom skin. I’ve used “position: fixed” from CSS, but there are other adjustments you need to do.

In case you are interested just in the fixed navigation at the top, Bootstrap has a special class .navbar-fixed-top (see https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top)

#13

Does anyone know where in the folder structure is the html code is to modify the navbar class?

#14

See https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/menus_macros.vm#L15

#15

Hi everyone,

@kostyanuch where you able to do this? I am also trying to do this but I am not a dev. Maybe you guys could point me where or which code exactly to modify?

Regards

#16

For anyone looking solution. Turned out it’s quite simple - here are the steps.

1.0 Either on the main page or on your Menuview page, edit Objects

image

2.0 Add a JavaScriptExtension object

2.1 Add your code, mine looks like this:

// When the user scrolls down 50px from the top of the document, slide down the navbar
// When the user scrolls to the top of the page, slide up the navbar (50px - below main menu)
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("menu-horizontal-xwiki-Menu-menunew").style.top = "0";
  } else {
    document.getElementById("menu-horizontal-xwiki-Menu-menunew").style.top = "50px";
  }
}

2.2 Configure where to use it and caching. Mine looks like this:

  • Use this extension: On this wiki
  • Caching policy: Default

2.3 This step may not be necessary, but I’ve added the following to XWiki.UIExtensionClass

#set ($discard = $xwiki.jsx.use('XWiki.SkinExt.WebHome'))

Entire code looks like this:

{{velocity}}
#if ($xwiki.hasAccessLevel('view', $xcontext.user, 'xwiki:Menu.menunew'))
#set ($discard = $xwiki.jsx.use('XWiki.SkinExt.WebHome'))
{{menu type="horizontal fixedWidth" id="menu-horizontal-xwiki-Menu-menunew"}}{{include reference="xwiki:Menu.menunew" /}}{{/menu}}
#end
{{/velocity}}

3.0 Add custom CSS in Administer Wiki > Look and Feel > COLOR THEME > Customize > Advanced

#menu-horizontal-xwiki-Menu-menunew {
	position: fixed;
	width: 100%;
	z-index: 100;
}

That’s all it took!