CODEWITHSUNDEEP
htmlcssnavbarbulma
Igor
Igor

Reputation: 408

Fixed Column with Bulma

i pretend to make this first column fixed, but when i add position:fixed, the columns overlap each other, how to fix this?

If its not possible, i want to know a sample that gives me a

side navbar fixed and responsive with bulma







<section class="main-content columns is-fullheight">
    <aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile">
        <p class="menu-label is-hidden-touch">Header</p>
        <ul class="menu-list">
            <li>
                <a href="#go-first" class="is-active">CIT</a>
                <ul><li><a href="#">Items</a></li><li><a href="#">Items</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="is-active">Other</a>
                <ul>
                    <li><a href="#">other</a></li>
                </ul>
            </li>
        </ul>
    </aside>

    <div class="container column is-10">
        <div class="section">
            <div class="card">
                <div class="card-header" id="go-first">
                    <p class="card-header-title">CIT</p>
                </div>
                <div class="card-content">
                    <div class="content">
                        header
                    </div>
                    <div class="columns">
                        <div class="column">
                            ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>    
```

Upvotes: 2

Views: 4630

Answers (1)

aldi
aldi

Reputation: 778

As I understood, your sidebar disappears on mobile, right?
Have you tried removing is-hidden-mobile class from aside element?

<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section">
    <p class="menu-label is-hidden-touch">Header</p>
    <ul class="menu-list">
        <li>
            <a href="#go-first" class="is-active">CIT</a>
            <ul><li><a href="#">Items</a></li><li><a href="#">Items</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="is-active">Other</a>
            <ul>
                <li><a href="#">other</a></li>
            </ul>
        </li>
    </ul>
</aside>
<div class="container column is-10">
    <div class="section">
        <div class="card">
            <div class="card-header" id="go-first">
                <p class="card-header-title">CIT</p>
            </div>
            <div class="card-content">
                <div class="content">
                    header
                </div>
                <div class="columns">
                    <div class="column">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

Upvotes: 2

Related Questions