CODEWITHSUNDEEP
htmltwitter-bootstrapresponsive-design
YoannLth
YoannLth

Reputation: 197

Bootstrap : responsive navbar trouble



I have a problem with my navbar when I resize the windows

problem http://img15.hostingpics.net/pics/76755571az.jpg



It is supposed to be aligned like this :
problem http://img15.hostingpics.net/pics/125996aze.jpg I think that I miss something in my css... Can someone help me to fix it?


Code demo:
http://codepen.io/KyleCprt/pen/JXBqEo


HTML:

<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script type="text/javascript" src="{{ app.request.basepath }}/lib/jQuery/jquery.min.js"></script>
  <script type="text/javascript" src="{{ app.request.basepath }}/lib/bootstrap/js/bootstrap.min.js"></script>
  <title>GoldenTicket</title>
</head>

<body>
  <div class="containerGT">
    <nav class="navbar navbar-default navbar-fixed-top navbar-default" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarGT">
              <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="#"><img src="http://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png">
          </a>
        </div>
        <div class="navbar-collapse collapse" id="navbarGT">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Event Categories <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
              </ul>
            </li>
            <li><a href="{{ path('panier') }}"><span class="glyphicon glyphicon-shopping-cart"></span> Your basket</a></li>
            <li class="{% if adminMenu is defined %}active{% endif %}"><a href="{{ path('admin') }}"><span class="glyphicon glyphicon-cog"></span> Administration</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-user"></span> Welcome, John <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="{{ path('logout') }}">Log out</a></li>
                <li><a href="{{ path('user_edit') }}">My account</a></li>
              </ul>
            </li>

          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
      <!--/.container-fluid -->
    </nav>
    <div id="content">Lorem ipsum dolor sit amet</div>
<footer class="footer">
  <a href="#">GoldenTicket</a> is a school project
</footer>


CSS:

body {
    padding-top: 100px;
}

.footer {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    text-align: center;
}

.eventTitle:hover, .eventTitle:focus {
    text-decoration: none;
}

.adminTable {
    margin-top: 20px;
    margin-bottom: 20px;
}

#errorPanel {
    padding-top: 30px;
    padding-bottom: 10px;
}


.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}

.containerGT .navbar-brand {
  height: 80px;
}

.containerGT .nav >li >a {
  padding-top: 30px;
  padding-bottom: 30px;
}
.containerGT .navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
}

#content{
  margin-left: 2%;
  margin-right: 2%;
}


/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
      -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 50px;
}
.navbar-alignit .navbar-brand {
    top: 50%;
    display: block;
    position: relative;
    height: auto;
    transform: translate(0,-50%);
    margin-right: 15px;
  margin-left: 15px;
}

.navbar-nav>li>.dropdown-menu {
    z-index: 9999;
}

.indexJumb{
  padding-top: 20px;
  padding-bottom: 20px;
}

.containerIndex{
  margin-left: 0;
}

.coverImgIndex{
  width:100%;
}

Upvotes: 0

Views: 903

Answers (3)

Laker
Laker

Reputation: 1812

EDIT (deleted all the previous now redundant text)

The problem is inside this element:

<nav class="navbar navbar-default navbar-fixed-top navbar-default" role="navigation">

You have a container there, but you have no row and column inside of that container. That's the problem with the margins IMHO. Bootstrap likes its structure, so you should obey it. It has padding (container) - margin (row) - padding (column) hierarchy so if you miss one and there are problems.

If you want to learn more about how this works in bootstrap, read this article http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works, it helped me a lot.

So you have two options:

  1. Get rid of the container all together (and it works nicely)

  2. Leave the container and add a row and column inside of it. So the row could be right after the container div and one column could be the logo and the other one the actual menu I guess.

Solution:

<nav class="navbar navbar-default navbar-fixed-top navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarGT">
....

Hope this helps:)

Upvotes: 1

kpares
kpares

Reputation: 1

It looks like your nav is breaking between 768ox-991px.

The Bootstrap dropdown menu doesn't activate until you reach the col-sm- breakpoint (768px) so will need to add a custom media query and target your dropdown nav to activate at the col-med (991px) breakpoint.

Upvotes: 0

BrainHappy
BrainHappy

Reputation: 432

Have you tried different values for the nav link font sizes and event title/logo on different media query sizes?

Having a smaller font and smaller image when viewed on smaller devices may just make it all fit nicely together.

Upvotes: 0

Related Questions