Waldemar W Waldemar W - 1 month ago 9
CSS Question

Bootstrap 3 - Issue with centering menu bar

I am writing web site using bootstrap 3. I have 2 problems with my code:


  1. I want to have a menu bar with logo centered

  2. After resizing browser window hamburger menu is not expanding



I am slowly giving up. Do you see any solution for this issue?
Here is my code - index.html and CSS file:

<!DOCTYPE html>
<html lang="en">

<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">
<title>Perm-Records</title>

<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Content height adjust -->
<!-- <script src="content-height-adjust/heightAdjust.js"></script> -->

<!--Font Awesome -->
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">

<link href="bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/Custom.css">
<link rel="stylesheet" href="css/flat-ui.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<link rel="stylesheet" href="css/sticky-footer.css">



<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="Custom">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<a class="navbar-brand" href="index.html">
<img class="img-responsive logo" src="images/perm-logo.jpg" alt="Perm-Records">
</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">MUSIC</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</nav> <!-- End navigation menu bar -->
</div>

<div class="container-fluid"> <!--Page content -->
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td align="center"><img src="images/Perm.png"></td></tr>
</table>
<p class="text-center"> Haubentaucher, Revaler Str 99, 10245 Berlin. </p>
</div>
<div class="col-md-3">
</div>
</div>
</div> <!-- End of page content -->

<div class="footer">
<div class="navbar-text pull-left" id="footer-text">
<p> &#169 2016 perm-records.com </p>
</div>
<div class="navbar-text pull-right" id="footer-social">
<!-- Font Awesome social buttons -->
<a href="https://soundcloud.com/permrecords" target="_blank" title="Soundcloud"><i class="fa fa-soundcloud fa-2x"></i></a>
<a href="https://www.facebook.com/permrecords/?fref=ts" target="_blank" title="Facebook"><i class="fa fa-facebook fa-2x"></i></a>
<a href="https://www.instagram.com/perm_records/" target="_blank" title="Instagram"><i class="fa fa-instagram fa-2x"></i></a>
</div>
</div>

</body>
</html>





.Custom .navbar {
background-color: transparent;
background: transparent;
border-color: transparent;
height: 180px;
}

.Custom .navbar .navbar-brand > a {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
padding:0;
}

.Custom .text {
text-align: center;
}

body, html{
background: url('../images/Background2.png') no-repeat center fixed;
padding-top: 0px;
height: 100vh;
margin: 0;
}

Answer

For No:1 = (I want to have a menu bar with logo centered)

First put the <div class="Custom">...</div> in a <div class="container">...</div> to make it fit into a body box controlled by bootstrap media queries. Second add <div class="container-fluid"> right after <nav> tag and end it with adding </div> before </nav>. Third add the following class in styles to make it align center and adjust margins etc accordingly.

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.navbar .navbar-collapse {
  text-align: center;
}

.Custom .navbar-toggle {
  margin: 10px 0px 0 0;
}

@media (min-width: 768px) {
  .Custom .nav >li >a {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

For No:2 = (After resizing browser window hamburger menu is not expanding)

You are not adding jquery library that is required by bootstrap library and needs to be added before it. So put the following or download the jquery.min.js (version 2.2.4) file and put it's script tag right after the <title>Perm-Records</title>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Sample Code using your code: http://codepen.io/Nasir_T/pen/rMgRPM

Hope this helps.