Could someone please spare a moment to assist me with a problem I am struggling to solve? I am in the process of developing a webpage for a local intermunicipal Football Association using Bootstrap, aiming for full mobile responsiveness.
The issue at hand is centered around aligning and ensuring that the menu/navbar (depicted in yellow) is both centered and equal in width to the header (displayed in blue). The desired outcome should resemble this: https://i.sstatic.net/sRxv8.jpg
However, my current display appears as follows: this: https://i.sstatic.net/XgLza.jpg
Specifically, the blue component needs to be 106px high while the yellow element should stand at 40px height.
In relation to the code snippet provided:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
overflow-x: hidden;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 1.42857143;
}
#glava {
height: 106px;
width: auto;
background-color: #002d68;
margin-top: 0px;
margin-bottom: 0px;
border: none;
border-radius: 0px;
}
.navbar {
margin-top: 0px;
margin-bottom: 0px;
border: none;
border-radius: 0px;
text-transform: uppercase;
text-decoration: none;
}
.navbar-default {
background-color: #ffff01;
color: #002d68;
height: 40px;
}
.glavni-meni {
background-color: #ffff01;
}
.header-seznam {
list-style-type: none;
display: inline-flex;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="glava">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="col-md-3">
<img src="img/logo-2.png" class="img-responsive" alt="logotip" style="margin-top:12px; height:80px;">
</div>
<div class="col-md-7">
<ul class="header-seznam">
<li><img src="img/naslov.jpg" class="img-responsive" alt="logotip"></li>
<li><img src="img/telefon.jpg" class="img-responsive" alt="logotip"></li>
<li><img src="img/mail.jpg" class="img-responsive" alt="logotip"></li>
<li><img src="img/podatki.jpg" class="img-responsive" alt="logotip"></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="navbar navbar-default navbar-custom">
<div class="container-fluid glavni-meni">
<button class="navbar-toggle" data-toggle="collapse" data- target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li><a href="">Competitions</a></li>
<li><a href="">Clubs</a></li>
<li><a href="">National Teams</a></li>
<li><a href="">Grassroots</a></li>
<li><a href="">Club Support</a></li>
<li><a href="">Forms and Regulations</a></li>
<li><a href="">Coaches and Referees</a></li>
<li><a href="">Delegates</a></li>
<li><a href="">Miscellaneous</a></li>
<li><a href="">Benefits</a></li>
</ul>
</div>
</div>
</div>P.S.: Please forgive any errors in my English; it's not my native language.