How can I eliminate whitespace showing up above a w3.css sidebar?

Question

I am building a website using Jekyll and the W3.CSS Framework. I have a sidebar for navigation on large screens which collapses on smaller screens. The problem occurs on large screens. When content in the main div scrolls, the sidebar doesn't scroll with it. This leaves a white rectangle on top of the sidebar where the page header normally would be (the header scrolls up with the content).

I would like for the sidebar to scroll along with the content, or somehow hide the empty space. So far I've tried using the w3-top class, which anchors the sidebar to the top of the screen but covers up the header. I tried wrapping the sidebar and content divs with another div, which had no effect. I tried changing the background color of the sidebar which also had no effect. Here is my page layout:

<div class="w3-container w3-sidebar w3-bar-block w3-collapse w3-theme-light" style="width:250px" id="site-toc">
    <button class="w3-button w3-large w3-hide-large w3-right" onclick="w3_close()">&times;</button>
    <h4>Contents</h4>
    {% assign section = site.data.contents[page.category] %}
    {% for article in section.articles %}
        {% if article.url == page.url %}
            {% assign cls = "w3-bar-item w3-button w3-theme-l1" %}
        {% else %}
            {% assign cls = "w3-bar-item w3-button" %}
        {% endif %}
        <a href="{{ article.url }}" class="{{ cls }}">{{ article.link-text }}</a>
    {% endfor %}
</div>

<article class="w3-container w3-main w3-theme-light" style="margin-left:250px">
    <header">
        <button class="w3-button w3-large w3-hide-large" onclick="w3_open()">&#9776;</button>
        <h2 style="color:#fff">{{ page.title }}</h2>
    </header>
    <section class="w3-text-theme">
        {% if page.image %}
        <img src="{{page.image}}" alt="{{ page.alt-text }}" class="w3-image" style="float:left;margin-right:16px;">
        {% endif %}
        {{ content }}
    </section>
</article>

Any suggestions on how to fix this? This is my first web project in a decade and my javascript skills are non-existent at this point.

score 0 · Answer 1 · answered May 13 '22 at 22:22

I decided to ditch the collapsible sidebar and try a different approach. I used the w3 fluid grid inside of a w3-row, which solved the scrolling problem.

---
layout: default
---
<div class="w3-row w3-theme-light">
    <div class="w3-col l3 w3-hide-small w3-hide-medium" id="site-toc">
        <div class="w3-bar-block w3-container">
            <h4>Contents</h4>
            {% assign section = site.data.contents[page.category] %}
            {% for article in section.articles %}
                {% if article.url == page.url %}
                    {% assign cls = "w3-bar-item w3-button w3-theme-l1" %}
                {% else %}
                    {% assign cls = "w3-bar-item w3-button" %}
                {% endif %}
                <a href="{{ article.url }}" class="{{ cls }}">{{ article.link-text }}</a>
            {% endfor %}
        </div>
    </div>
    <div class="w3-col l6 w3-border">
        <div class="w3-container w3-text-theme">
            {{ content }}
        </div>
    </div>
    <div class="w3-col l3 w3-hide-small w3-hide-medium">
        <p></p>
    </div>
</div>

How can I eliminate whitespace showing up above a w3.css sidebar?

1 Answers1