Bulma: Fixed navbar is on top of overlays

Created on 14 Nov 2017  路  7Comments  路  Source: jgthms/bulma

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.6.1

Description

Fixed navbar is on top of overlays, I think it's not intended.

Steps to Reproduce

See documentation Modal page: https://bulma.io/documentation/components/modal/
Scroll up to see the navbar and open modal.

Expected behavior

Overlay to be on top of everything.

Actual behavior

Navbar on top.

picture rafaelpimpa
👍3

Most helpful comment

My error was to have a section following a nav without class="section". This also resulted in an overlapping behavior.

picture PapaMufflon on 23 Oct 2018
👍3

All 7 comments

Can I take this up @jgthms ?

reddysridhar53 picture reddysridhar53 on 14 Nov 2017

This has been fixed.

jgthms picture jgthms on 19 Jan 2018
👍2

I'm seeing this behavior in version 0.7.1. Any ideas?

jamauro picture jamauro on 29 Aug 2018

The z-index is set to 30 by default. It needs to be set to auto.

.navbar {
    background-color: white;
    min-height: 3.25rem;
    position: relative;
    z-index: auto;
}
namontalbano picture namontalbano on 1 Sep 2018
👍2

Add 'has-navbar-fixed-top' class for or navbar. BULMA Document is very clear. Thanks @jgthms
<nav class="navbar has-shadow is-transparent has-navbar-fixed-top"> or <html class="has-navbar-fixed-top">

mpoonuru picture mpoonuru on 12 Oct 2018
👍1

My error was to have a section following a nav without class="section". This also resulted in an overlapping behavior.

PapaMufflon picture PapaMufflon on 23 Oct 2018
👍3

My error was to have a section following a nav without class="section". This also resulted in overlapping behavior.

Yes, having both section and container is nicer. Containers do not have top and bottom padding. Section does.

mgmgpyaesonewin picture mgmgpyaesonewin on 12 Mar 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

guillecro picture guillecro  路  3Comments
dotMastaz picture dotMastaz  路  3Comments
Laraveldeep picture Laraveldeep  路  3Comments
Wikiki picture Wikiki  路  3Comments
jaredreich picture jaredreich  路  3Comments