Fixed sidebar in sections


#1

Hi guys,

I’m very new to Grav, so maybe the question can sound trivial.

I’m exploring the quark-open-publishing theme and I was wondering if it is possible to have a fixed sidebar in Sections. That is, in the following picture, having the right sidebar that follows the page scrolling:

Thanks for any hint

Cheers

Matteo


#2

Hi @ghtmtt, I am the author of the Quark Open Publishing Theme and I don’t know how to do that myself but perhaps someone else here might via CSS or re-working the Twig🙂

UPDATE: Well, lo and behold the SpectreCSS framework has a class that makes an element fixed! Here is a demo video:

Let me look into things more and see if I can add this as an option to my next Theme update.

I used SpectreCSS columns and nav element for the sidebar if that helps:


#3

Hi @paulhibbitts, first, awesome theme, really. The more I dig into it and the more I love it :slight_smile:

I don’t get how you fixed it in your video. Have you changed something into the sections.html.twig template?


#4

Thanks @ghtmtt - Quark does all the heavy lifting🙂

I’ve been able to fix the position of the Sections navbar by adding the p-fixed class to the element, so line 82 in template files sections.html.twig is changed to <ul class="nav p-fixed">

However, if the Browser window is shrunk the Section navbar disappears with this approach - not sure why yet. I will keep looking into it, and like I said someone with more CSS/Twig experience might have an idea here too.


#5

Awesome, thanks! Should I leave this open for the Browser shrinking/disappearing?

Again, awesome!


#6

Let’s leave it open for now - perhaps someone with more experience with SpectreCSS might chip in about how to have the fixed nav element move to the bottom of the screen on smaller screens.


#7

perfect, thanks for your help