Struggling with the sidebar display issue on mobile, as the menu appears outside the sidebar when resized. Is it feasible to relocate the bar to the top and resize it for a better mobile view experience? Adjusting the navbar's position affects the header alignment, and I prefer everything visible without scrolling.
Apologies for any inconvenience caused; being a novice complicates things. Thank you.
Sample HTML:
<nav class="navbar navbar-expand-lg navbar-dark bg-black flex-column">
<a class="navbar-brand" href="#">
<img src="img/el.png" alt="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column" id="navbarNav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About Me</a>
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">Contacts</a>
</div>
<div class="icons">
<ul style="list-style: none;">
<li><i class="fab fa-linkedin fa-2x"></i></li>
<li><i class="fab fa-twitter fa-2x"></i></li>
<li><i class="fab fa-github fa-2x"></i></li>
</ul>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col">
<h1>Hello,<br>I'm Silvia</h1>
<button class="btn btn-outline-warning btn-lg" type="submit">Contact Me</button>
</div>
</div>
</div>
</header>
Cascading Style Sheet (CSS):
.navbar{
position: fixed;
background-color: black;
height: 100vh;
width: 150px;
top: 0;
left: 0;
z-index: 1; /* Stay On Top */
font-size: 1.2rem;}
.navbar-brand img {
position: center fixed;
margin-left: 10px;
width: 90px;
height: 70px;}
.navbar a {
color: white;}
.fab{
color: #fec614;
margin: 10px -40px;}
body {
background: url(../img/background.jpg) center fixed;
background-size: cover;
font-family: 'Ubuntu', sans-serif;}
header {
color: white;
margin-top: 250px;
margin-left: 150px; /* Same as width of sidebar */}
h1{
font-size: 4.5rem;}
.btn {
margin-top: 40px;}