CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
TomBrx
TomBrx

Reputation: 329

Responsive menu align right Bootstrap

I am making a website for myself and I am having trouble with the bootstrap grid to make the menu responsive on mobile screens.

Full screen image: Full screen - menu bar

I managed to write the responsive design of the menu. However when rescaling there seems to be an issue with the menu items. They just won't align under the menu. (Preferebly I would want them to hover over the image underneath instead of pushing it all down).

Mobile screen image: Menu items not aligned with collapsed menu.

Thanks in advance for all the help. In case I am violating any rules please point me in the right direction.

Kind regards, Tom

/* Lay-out: Header*/

.header-row {
  display: flex;
  align-items: center;
}
.nav-no-mar-pad {
  margin: 0;
  padding: 0;
}
.navbar-toggle {
  border: #022F40 solid 1px;
  margin: 8px 4px 8px 45px;
  text-align: right;
}
.icon-bar {
  border: #022F40 solid 1px;
}
.navbar-nav li a {
  margin-right: 0;
  text-align: center;
  width: 90px;
  padding: 10px 10px;
}
/* --- End --- */
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<div class="header">

  <div class="container-fluid background-white">
    <div class="row  header-row">

      <div class="col-lg-5">
        <img id="header-logo" class="img-responsive" src="http://placehold.it/325x75">
      </div>

      <div class="col-xs-6 col-md-offset-1" style="padding-right: 0">
        <nav class="navbar navbar-right nav-no-mar-pad">
          <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>
          <div id="navbar" id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">About me</a>
              </li>
              <li><a href="#">Contact</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>

    </div>
  </div>

</div>

Upvotes: 2

Views: 2003

Answers (1)

Eric G
Eric G

Reputation: 2617

Since you don't mind if the menu floats over other elements on the page one easy way to achieve this will be to use absolute positioning. You can easily push your elements to the right side of the screen and align them over there with this method. Add something like this:

@media only screen and (max-width: 768px) {
    #navbar {
        position:absolute;
        right:0;
    }
    .navbar.navbar-right.nav-no-mar-pad {
        position:absolute;
        right: 0;
    }
    .header-row {
        align-items:inherit;
    }
}

This should give you the desired styling and only give them to you on smaller screen sizes. I have a working version here if you'd like to see:

http://codepen.io/egerrard/pen/xEYOzy

Upvotes: 1

Related Questions