weinde weinde -4 years ago 43
CSS Question

Bootsrap menu alighn in center of page and responsive

If someone has time I'd like some help with a problem that I cant solve...
I'm making a page for a local intermunicipal Football Association using Bootstrap. I want the page to also be fully mobile responsive...

So the problem I'm having is centering the menu/navbar (that yellow thing) to be alighned and have same width as the header (that blue thing)...
It has to look like this: **this**

mine curenty looks like this: **this**

The blue thing has to be 106px high and the yellow thing has to be 40px high...

Oh and my code looks like this...



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="">Tekmovanja</a></li>
<li><a href="">Klubi</a></li>
<li><a href="">Reprezentance</a></li>
<li><a href="">Grassroots</a></li>
<li><a href="">Klub Klubu</a></li>
<li><a href="">Obrazci in predpisi</a></li>
<li><a href="">Trenerji in sodniki</a></li>
<li><a href="">Delegati</a></li>
<li><a href="">Razno</a></li>
<li><a href="">Ugodnosti</a></li>
</ul>
</div>
</div>
</div>





P.S I apologize for bad english... not my native language

Answer Source

Here's an example of how to center navbar items.

HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand Logo</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="pull-left"><a href="#">Dashboard</a></li>
        <li class="active"><a href="#">Stories</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Photos</a></li>
        <li class="social pull-right"><a href="#">Social Links</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS:

 .navbar-nav {
    width: 100%;
    text-align: center;
    > li {
      float: none;
      display: inline-block;
    }
  }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download