How to get a fixed sidebar in Bulma?

user_4941988 0
Viewed 9022

I want to have two columns, a left sidebar, and the main content.

I want the sidebar to be fixed (and for it to scroll if need be)

  <div class="is-widescreen">
    <div class="columns">
      <aside id="main_sidebar" class="column">
        <h1>test</h1>
      </aside>  
      <div class="column is-four-fifths">
        <div id="editorjs" class="content">
          <!-- see the demo for the effect-->
        </div>
        <button id='save'>save article</button>    
      </div>
    </div>
  </div>

The editorjs would contain lots of content and so I want the sidebar content not to be affected by the scrolling on the main section.

Demo

bulma css html
2 Answers

position: sticky along with display: inline-block can help you achieve that.

Also, set max-height to the full height of the page and overflow-y: auto for the scroll functionality. I've also set the top and bottom properties to 0 in order to stretch the sidebar along its y axis.

Check out my JS Bin.

user_55602120

If you want sidebar completely made out of Bulma here is my solution without CSS modification:

<div class="columns">


<div class="column is-one-fifth">

  <aside class="menu">
    <p class="menu-label">
      General
    </p>
    <ul class="menu-list">
      <li><a>Dashboard</a></li>
      <li><a>Customers</a></li>
    </ul>
    <p class="menu-label">
      Administration
    </p>
    <ul class="menu-list">
      <li><a>Team Settings</a></li>
      <li>
        <a class="is-active">Manage Your Team</a>
        <ul>
          <li><a>Members</a></li>
          <li><a>Plugins</a></li>
          <li><a>Add a member</a></li>
        </ul>
      </li>
      <li><a>Invitations</a></li>
      <li><a>Cloud Storage Environment Settings</a></li>
      <li><a>Authentication</a></li>
    </ul>
    <p class="menu-label">
      Transactions
    </p>
    <ul class="menu-list">
      <li><a>Payments</a></li>
      <li><a>Transfers</a></li>
      <li><a>Balance</a></li>
    </ul>
  </aside>

</div>

<div class="column">

  <div class="block">
    This text is within a <strong>block</strong>.
  </div>
  <div class="block">
    This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
  </div>
  <div class="block">
    This text is within a <strong>third block</strong>. This block has no margin at the bottom.
  </div>
</div>
user_56822380
Related