0

I have problem with my bootstrap navigation menu for @media (max-width: 767px) screens. The problem is that I'm floating the ICON-BAR for mobile to the right and I'm trying to center in the middle of the page the content ( page links Home, Pages etc. ). So my idea is to put the icon bar on the right side of the page and when the icon-bar is pressed to scroll down ( centered menu in the middle of the page ).

body { background: red; }
.navbar { float: left; color: #000; margin: 40px 80px 0 0; } 
.navbar a { color: #fff; margin-bottom: 3px; }
.navbar a:hover { background: none !important; margin-bottom: 0; border-bottom: 6px solid #11749e; }

.navbar-toggle .icon-bar { display: block; width: 28px; height: 4px; background-color: #cccccc; border-radius: 1px; }

@media (max-width: 767px) {
 .navbar { float: right; }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- NAVBAR -->
<nav class="navbar">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div><!-- .navbar-header -->
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="index.html">Pages</a></li>
        <li><a href="index.html">Features</a></li>
        <li><a href="index.html">Extensions</a></li>
        <li><a href="index.html">Tutorials</a></li>
        <li><a href="index.html">Contact Us</a></li>
      </ul>
    </div><!-- .nav-collapse -->
</nav>
Mll
  • 63
  • 2
  • 8
  • https://jsfiddle.net/otcg2otk/ link to fiddle because i have problems with adding it to my question and I'm trying to fix it – Mll May 09 '17 at 13:56
  • You're having problems because "Links to jsfiddle.net must be accompanied by code" and "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself." – Carol Skelly May 09 '17 at 14:01
  • 1
    And the first answer explained [here](http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar) works: https://jsfiddle.net/dkbmon0y/ – Carol Skelly May 09 '17 at 14:03

0 Answers0