Menu
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>
320
It is because the nav bar is fixed.
A fixed navigation bar, also referred to as a “sticky” navigation bar, is a toolbar that stays in place while the user is scrolling the web page.
HTML
<section class="section">
<nav class="navbar is-fixed-top" role="navigation">
...
</nav>
</section>
if you use is-fixed-top, enclose nav in section
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
