Bulma navbar overlaps main section

Asked 26/2, 2019 at 14:16 Answered 5/7, 2021 at 17:25

I'm trying to figure out to use Bulma's fixed navbar on top covering 10%, a main section covering 80% and a navbar at the bottom covering another 10%. The navbars have icons and text. Without setting the heights there is already some deviance and by setting the heights the deviance seems to be a little less, however the containers are still not aligned.

<!DOCTYPE html>
<html class="" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body class="has-navbar-fixed-top has-navbar-fixed-bottom">
    <header>
        <nav class="navbar is-fixed-top message-header has-background-warning">
            <a>
                <span class="icon is-large"><i class="fas fa-users fa-3x"></i></span>
                <span>Members</span>
            </a>
            <a>
                <span class="icon is-large"><i class="far fa-images fa-3x"></i></span>
                <span>Photos</span>
            </a>
            <a>
                <span class="icon is-large"><i class="fas fa-map-marked-alt fa-3x"></i></span>
                <span>Maps</span>
            </a>
            <a>
                <span class="icon is-large"><i class="fas fa-calendar-alt fa-3x">    </i></span>
            <span>Calendar</span>
            </a>
        </nav>
    </header>

    <section class="eightyvh has-background-primary">
        <div class="container">Why is this text behind the navbar?</div>
    </section>
    <footer>
        <nav class="navbar is-fixed-bottom message-header has-background-warning">
            <a>
                <span class="icon is-large"><i class="fas fa-users fa-3x"></i></span>
                <span>Members</span>
            </a>
            <a>
                <span class="icon is-large"><i class="far fa-images fa-3x"></i></span>
                <span>Photos</span>
            </a>
            <a>
                <span class="icon is-large"><i class="fas fa-map-marked-alt fa-3x"></i></span>
                <span>Maps</span>
            </a>
            <a>
                <span class="icon is-large"><i class="fas fa-calendar-alt fa-3x">    </i></span>
            <span>Calendar</span>
            </a>
        </nav>
    </footer>
</body>
</html>

Politics answered 26/2, 2019 at 14:16 Comment(1)

If your header is fixed, you need to move down the text behind it by giving margin-top to it – Cannular 26/2, 2019 at 14:30

HTML

<section class="section">
 <nav class="navbar is-fixed-top" role="navigation">
 ...
 </nav>
</section>

if you use is-fixed-top, enclose nav in section

Gujarat answered 3/1, 2021 at 12:11 Comment(2)

This solution does not work with the full height hero – Linguistic 29/3, 2021 at 23:26

does not work. with example code from Bulma website and 3 columns below, there is a substantial margin under navbar by adding a section around navbar – Flatter 30/4, 2021 at 8:48

If you don't want your navbar to overlap your content, you also need to add the class .has-navbar-fixed-top in the < body > element.

Documentation for fixed navbar: https://bulma.io/documentation/components/navbar/#fixed-navbar

Flyover answered 11/2, 2021 at 14:45 Comment(2)

Thank you! This also solved my problem with Buefy, where the content below the navbar was placed higher after a vue route change. – Unmeet 7/4, 2022 at 13:39

Rectification: it did not solve my Buefy problem. Manually setting b-navbar class="is-fixed-top" did solve the issue. – Unmeet 7/4, 2022 at 14:20

you have set these classes has-navbar-fixed-top and has-navbar-fixed-bottom. which will give your body a padding of 3.25rem on top and bottom. And your navbar has a height more than 3.25rem because of its content

solution : 1. reduce the height of your navbar to be not greater than 3.25rem or 2. increase the top and bottom padding

Gertrudgertruda answered 26/2, 2019 at 14:41 Comment(1)

there is a sass variable for that $navbar-height – Farriery 10/12, 2019 at 11:9

Add top padding to the body to bring the main content down.

body{
    padding-top: 60px;
}

Morsel answered 5/7, 2021 at 17:25 Comment(0)

Recommended topics

Hot tags