Bulma: [Question]: How to make NavBar float over content

[khawajaumarfarooq]

This is about Bulma.

It is a question.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.7.4
My browser is: Chrome and Firefox
I have looked though all the nav bar issues but have not been able to see this issue addressed in them.

Description

I have a standard nav bar with the burger menu. This is taken straight from the docs website.

I have managed to activate and deactivate the menu by clicking the burger menu. This is fairly straight forward.

My issue is that when the burger menu activates, it pushes the content out of the way. I would like it to float over the content.

Is there a simple Bulma idiomatic way to make this happen?

Steps to Reproduce

1. Click the burger menu icons on any of the nav bars in this section: https://bulma.io/documentation/components/navbar/#colors
2. Note the content being pushed out of the way

Expected behaviour

I would like the nav bar burger menu to float over the subsequent content.

Actual behaviour

The burger menu does not float over the subsequent content but pushes it out of the way.

[diomed]

could you link to your page, or make a pen?

[emkajeej]

Not currently. You could add .is-fixed-top to the navbar to make it work, but the tradeoff is that your navbar will always be visible at the top even when scrolling down.

If you don't want that you'd have to write the css yourself, namely adding position: fixed; top: $navbar-height (or 3.25rem); right: 0; to .navbar-menu on the correct breakpoints.

[n12o]

I think this works:

.navbar-menu.is-active { position: absolute; width: 100%; }

Checkout this pen.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SeVortex]

So Nice! Thnks!