Bulma es un framework CSS basado en flexbox . Se envía con sus propios elementos y componentes para que no tenga que diseñar todo desde cero. En este artículo, veremos cómo hacer que la barra de navegación se fije en la parte superior o inferior en Bulma utilizando las clases CSS proporcionadas por el marco.
Clases de barra de navegación fija de Bulma:
Para hacer que la barra de navegación se fije en la parte superior:
- has-navbar-fixed-top: esta clase se aplica en el elemento <html> o <body> si contiene una barra de navegación fija en la parte superior.
- is-fixed-top: esta clase se aplica en el componente de la barra de navegación que se fijará en la parte superior.
Sintaxis:
<body class="has-navbar-fixed-top">
<nav class="is-fixed-top">
...
</nav>
</body>
Para hacer que la barra de navegación se fije en la parte inferior:
- has-navbar-fixed-bottom: esta clase se aplica en el elemento <html> o <body> si contiene una barra de navegación fija en la parte inferior.
- is-fixed-bottom: esta clase se aplica en el componente de la barra de navegación que se fijará en la parte inferior.
Sintaxis:
<body class="has-navbar-fixed-bottom">
<nav class="is-fixed-bottom">
...
</nav>
</body>
Ejemplo 1: El siguiente ejemplo ilustra cómo hacer una barra de navegación fija en la parte superior con Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bulma Navbar Fixed to top
</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.navbar {
height: 70px;
padding: 10px;
}
.head{
margin-top: 70px;
}
</style>
</head>
<body class="has-text-centered
has-navbar-fixed-top">
<div class="container">
<nav class="navbar is-dark
is-fixed-top">
<div class="navbar-brand">
<a class="navbar-item"
href="https://geeksforgeeks.org">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png">
</a>
<div class="navbar-burger"
data-target="navBackgroundDemo1">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navBackgroundDemo1" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
Home
</a>
<a class="navbar-item" href="#">
Courses
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<button class="button
is-primary">
Algorithms
</button>
</p>
<p class="control">
<button class="button is-primary
is-outlined">
Data Structures
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
<div class="head">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>
Bulma Navbar Fixed to top
</b>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra cómo hacer una barra de navegación fija en la parte inferior de Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bulma Navbar Fixed to bottom
</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.navbar {
height: 70px;
padding: 10px;
}
</style>
</head>
<body class="has-text-centered
has-navbar-fixed-bottom">
<div class="container">
<nav class="navbar is-dark is-fixed-bottom">
<div class="navbar-brand">
<a class="navbar-item" href=
"https://geeksforgeeks.org">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png">
</a>
<div class="navbar-burger"
data-target="navBackgroundDemo1">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navBackgroundDemo1"
class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
Home
</a>
<a class="navbar-item" href="#">
Courses
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary">
Algorithms
</button>
</p>
<p class="control">
<button class="button is-primary
is-outlined">
Data Structures
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
<div class="head">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Navbar Fixed to bottom</b>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/components/navbar/#fixed-navbar