Create floating/sticky sidebar in Quark blog

Support Themes & Styling
1

Hi guys,

I found this post while searching on how to have the sidebar fixed.

I simply included ~ all the content of my sidebar template (essentially blog-sidebar.html.twig) inside a

    <div class="p-fixed">
       ...
    </div>

so the file at the end was:

{% set feed_url = wiki.url == '/' or wiki.url == base_url_relative ? (base_url_relative~'/'~wiki.slug) : wiki.url %}
{% set new_base_url = wiki.url == '/' ? '' : wiki.url %}
{% set sidebar_root = header_var('sidebar_root', [page, blog, wiki])  %}

<div class="p-fixed">

  {% if config.plugins.simplesearch.enabled %}
  <div class="sidebar-content">
    {% include 'partials/simplesearch_searchbox.html.twig' %}
  </div>
     ...
    {% if config.plugins.feed.enable_json_feed %}<a class="btn" href="{{ feed_url }}.json"><i class="fa fa-rss-square"></i> JSON</a>{% endif %}
  </div>
  {% endif %}

</div>

The result is not bad at all:

image
image2394×1014 207 KB

with the only drawback that “fixed” is really fixed and so once the page is scrolled and the hero images is no more visible, all that space is empty:

image
image2394×1014 128 KB

Ciao,
Matteo

2

@bozzochet, I took a look at how Bootstrap implements a ‘sticky’ toc.

On a fresh install of Grav 1.7.9, I added the following snippet to ‘/user/themes/quark/css/custom.css’:

// Only apply sticky when columns are shown side-by-side
@media screen and (min-width: 841px) {
  #sidebar {
    position: sticky;
    top: 4rem;
    height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

remain

You will probably need to adjust the values for ‘height’ and ‘top’ to suit your own needs.

Note: Off course, this should be done in an inherited theme to prevent loss of changes when a new version of Quark arrives.

1 Like
3

Ciao,

this is not working for me.

Maybe is due on how I inherited and customized.

Hi created a custom theme (“My Quark”) for my website:

image
image2246×1138 203 KB

This will be the website of a scientific experiment (HERD, a space-born astroparticle detector). This will be the website both for “public” (outreach) and for the international collaboration (in a section eventually protected via password).

The software of this experiment is on Gitlab and we wanted to host here its wiki.
So what I did is to “copy” the blog templates from the “quark” theme, renamed to wiki (also in the internal links) so to customize just the pages I declare as “wiki”.

$> ls user/themes/my-quark/templates/
item.html.twig    modular           modular.html.twig partials          wiki.html.twig
$> 

$> ls user/themes/my-quark/templates/partials/
hero.html.twig           logo.html.twig           wiki                     wiki-item.html.twig      wiki-list-item.html.twig wiki-sidebar.html.twig

in particular wiki.html.twig has

    {% block sidebar %}
      {% include 'partials/wiki-sidebar.html.twig' %}
    {% endblock %}

and wiki-sidebar.html.twig (the one I was referring in my first post) has

  {{ page.find("/#{sidebar_root}/modules/sidebar").content|processhtmllinks|raw }}

(slightly changed with respect to the default “quark” sidebar.html.twig to allow for a custom header var sidebar_root).
In principle there’s not any other difference.

I put the snippet you mentioned in my user/themes/my-quark/css/custom.css that now is:

.container.grid-xl {
    max-width: 20000px;
}

.hero.hero-tiny {
    max-height: 3.5em;
    padding-top: 4.5em;
    padding-bottom: 0px;
}

h1, .h1 { font-size: 3.5em; }

@media screen and (min-width: 841px) {
  #sidebar {
    position: sticky;
    top: 4rem;
    height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

but the sidebar is disappearing when scrolling the page…

What I miss?

Thanks,
Matteo

4

@bozzochet, I’m afraid you are overestimating my skill in generating a mental image of the final generated HTML… And HTML is the only thing of interest because CSS styles HTML elements, not Twig templates.

Do you have a URL to share?

1 Like
5

Ciao,

I think was the cache… Now is working…

However:

http://herd.pg.infn.it/vdev/beginner’s-guide/general-concepts

Thanks,
Matteo

6

@bozzochet, Nice to hear it’s working.

According the forum’s netiquette, you may now spread some ‘love’ and mark the issue as being solved. :wink:

7

Yes thanks!

Maybe I still miss to flag the post as “solved”… Now I “study” on hot to do!

Thanks again,
Matteo