Using bootstrap 4 for a project and experiencing an issue with the navbar overlapping the content. How do I make the remaining content adjust when toggling the dropdown menu?
To address this problem, I have applied a 50px margin to the body element.
The transparency in the snippet displaying the header is puzzling. Here's how my site appears on my browser:
https://i.sstatic.net/RTobV.png https://i.sstatic.net/7JPZc.png
.row-header {
margin: 0px auto;
padding: 0px;
}
body {
padding: 50px 0px 0px 0px;
z-index: 0;
}
.navbar-dark {
background-color: #512da8;
}
.navbar-brand {
padding-right: 20px;
}
.row-content {
margin: 0px auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height: 400px;
}
.footer {
background-color: #d1c4e9;
margin: 0px auto;
padding: 20px 0px 20px 0px;
}
.jumbotron {
padding: 70px 30px 70px 30px;
margin: 0px auto;
background: #9575cd;
color: floralwhite;
}
address {
font-size: 80%;
margin: 0px;
color: #0f0f0f;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<link rel="stylesheet" href="css/styles.css" />
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand mr-auto">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
[...]