I am encountering difficulties with my coding as I try to align the menu sandwich in my header correctly. The issue arises when I minimize the browser width, causing the menu sandwich to be positioned below the logo instead of to the right of it. Additionally, I would like the menu sandwich to be located at the far right of the header when the browser window is larger. Despite conducting research, I am struggling to figure out how to manipulate this menu effectively. While the codes I have come across are similar regarding the menu sandwich, they do not exhibit the same behavior as on my website.
Here's my code:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet">
<title>Rev'Iso entreprise de rénovation et d'isolation (rénovation énergétique) de votre habitat.</title>
<meta name="description" content="Rev'iso vous propose ses artisans pour la réalisation de différents travaux de rénovation et d'isolation dans
votre habitat avec des certications de qualité." />
</head>
<body>
<div class="container-fluid" style="background:transparent url('images/fond_header8.jpg') no-repeat center center;min-height : 485px;">
<div class="row" style="background:transparent url('images/bar.png') repeat-x;">
<!-- Taille 6 sur smartphones, 4 sur tablettes, 3 sur desktop et plus -->
<div class="col-xs-6 col-sm-4 col-md-3">
<img src="images/logo.png">
</div>
<!-- Taille 6 sur smartphones et tablettes, 7 sur desktop et plus -->
<div class="col-md-3 d-none d-lg-block">
<span class="textTel"> <img src="images/telline.svg"/ width="95px" height="70px"> 09 82 52 79 04</span>
</div>
<!-- Masquée sur smartphones, taille 2 sur tablettes et plus -->
<div class="col-sm-7 col-md-6 hidden-xs" style="vertical-align:middle;">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Accueil <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="renovation.html">Rénovation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="isolation.html">Isolation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="devis.html">Devis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
CSS :
body{
background-color: #C7C8C9;
width:100%;
margin:0px;
padding:0px;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
padding-bottom :0px;
padding-top:0px;
}
/* More CSS styles go here */
screenshots :
https://i.sstatic.net/JEGSY.png
https://i.sstatic.net/P5VjX.png
I appreciate any assistance provided.