У меня проблемы с моим кодом для правильного выравнивания бутерброда меню в моем заголовке. Проблема в том, что, когда я устанавливаю ширину моей рамы на минимальный размер, сэндвич меню располагается под логотипом, а не справа от логотипа. Плюс, я хочу, чтобы он был справа от заголовка, когда баузер больше. Я занимаюсь исследованиями, но у меня проблемы с тем, как манипулировать этим меню. Все коды, которые я видел, примерно одинаковы в сэндвиче с меню, но они ведут себя не так, как на моем сайте.
Мой код:
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 certication 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;
}
.lienpage{
background-color:#ff5300;
color:white;
line-height:45px;
text-align:center;
width:260px;
border-radius: 12px;
margin:auto;
position : relative;
}
.lienpage:hover{
background-color:#EC9200;
}
.lienpage a{
color : white;
font-size: 17px;
}
.row {
margin-bottom: 0px;
}
.row [class^="col-"] {
padding-bottom: 0px;
}
.navbar-nav li{
background : url(images/separateur.png) no-repeat;
background-position : left;
}
.navbar-nav li a {
line-height: 80px;
}
.bg-light {
background-color: transparent !important;
}
p {
font-family: 'Cantarell', sans-serif;
font-size: 18px;
line-height: 25px;
color : #398e9d;
font-weight:bold;
}
.textTel {
font-family: 'Droid Serif', Georgia, Times, serif;
font-size: 22px;
line-height: 80px;
color : #ff6400;
font-weight:bold;
}
.texteBlanc {
font-family: 'Cantarell', sans-serif;
font-size: 18px;
color : #fff;
font-weight:bold;
}
.greenbluetext {
font-family: 'Cantarell', sans-serif;
font-size: 26px;
color : #006e71;
font-weight:bold;
text-align : center;
}
.textTel {
font-family: 'Droid Serif', Georgia, Times, serif;
font-size: 22px;
line-height: 105px;
color : #ff6400;
font-weight:bold;
}
.titreCategorieHome {
font-family: 'Cantarell', sans-serif;
color : #FFF;
font-size: 16px;
font-weight:bold;
}
скриншоты:
Спасибо за помощь.