I'm currently working on creating a sidebar navigation using the Bootstrap 4 framework. The menu should be displayed at the top of the page on small devices.
Here is my approach:
.sidebar {
background-image: linear-gradient(180deg, rgb(33, 243, 96) 0%, #077710 70%);
}
.sidebar .navbar-brand {
font-size: 1.1rem;
}
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.main {
flex: 1;
}
.main .top-row {
background-color: #e6e6e6;
border-bottom: 1px solid #d6d5d5;
}
.nav-item:first-of-type {
padding-top: 1rem;
}
.nav-item:last-of-type {
padding-bottom: 1rem;
}
.nav-item a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item a.active {
background-color: rgba(255, 255, 255, 0.25);
color: white;
}
.nav-item a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: white;
}
.content {
padding-top: 1.1rem;
}
.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
}
/* @media (max-width: 767.98px) { */
.main .top-row {
display: none;
}
/* Burger-icon animation */
.navbar-toggler {
position: relative;
}
.navbar-toggler:focus,
.navbar-toggler:active {
outline: 0;
}
.navbar-toggler span {
display: block;
background-color: #444;
height: 3px;
width: 25px;
margin-top: 4px;
margin-bottom: 4px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
...
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<contentwrapper>
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">MyTestPage</a>
<button class="navbar-toggler navbar-toggler-right collapsed" data-toggle="collapse" data-target="#navbarContent" aria-expanded="false" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav flex-column collapse" id="navbarContent">
<li class="nav-item">
<a class="nav-link active" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page3
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page4
</a>
</li>
</ul>
</div>
<div class="main">
<f:render section="Main" />
</div>
</contentwrapper>
</body>Please note that I have commented out the media queries in the CSS to ensure it displays correctly on mobile devices.
When clicking the hamburger icon to expand the menu, you may notice that initially, the menu items are displayed horizontally instead of vertically. After about half a second, they change to the correct layout.
If you know what mistake I made or have a workaround for this issue, please share your insights. Thank you in advance.