I recently came across a Bootstrap template that features a transparent navbar and a stunning background image. I am utilizing bootstrap-vue, which simplifies the process with elements like <b-container> serving as shortcuts for standard Bootstrap structures:
<!DOCTYPE html>
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Home</title>
<link rel="stylesheet" href="/site/themes/theme/css/theme.css">
</head>
<body class="flexible-layout">
<div id="app">
<header style="background-image: url(/site/themes/theme/img/covers/cover-18.jpg)">
<b-container>
<div class="component-nav">
<b-navbar type="dark" variant="dark" class="bg-transparent" fixed="top">
<b-navbar-nav>
<b-navbar-brand href="/" tag="h1" class="mb-0 logo">Hallowelt.io</b-navbar-brand>
<b-nav-item href="/">Home</b-nav-item>
<b-nav-item href="/about">About</b-nav-item>
</b-navbar-nav>
</b-navbar>
</div>
</b-container>
<b-container>
<b-card>
Test
</b-card>
</b-container>
</header>
<b-container class="content">
<main role="main" class="container mt-4">
<div class="hero">
<b-jumbotron header="Test" lead="Test">
<p>Dies ist ein <strong>test</strong></p>
</b-jumbotron>
</div>
<p>Dies ist ein Test</p>
</main>
</b-container>
<footer class="pt-4">
<div class="text-center py-3">© 2019
</div>
</footer>
</div>
<script src="/site/themes/theme/js/theme.js"></script>
</body>
</html>
This is a snippet of my custom CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue", sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 75vh;
background-size: cover;
}
.navbar {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
min-height: 75px;
margin-bottom: 20px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
font-weight: normal;
font-size: large;
-webkit-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
.navbar.bg-transparent{
background-color: #343a40 !important;
opacity: 0.6;
filter: alpha(opacity=50) !important;
}
.navbar a {
vertical-align: middle;
}
Currently, I would like to enhance the <header> with additional content such as a slider or a card element.
One approach could involve adding a padding rule directly to the <header> container:
header .container {
padding-top: 100px;
}
However, I am unsure if this method aligns with best practices.
Thus, my query is: What is a proper way to incorporate elements like cards and jumbotrons within the <header> section?