0



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%;
}
YoannLth
  • 197
  • 2
  • 14

3 Answers3

1

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:)

Laker
  • 1,622
  • 4
  • 20
  • 32
  • Thanks, I think your solution will work but I use composer. So I think that each time I will update with composer, it will erase my custom bootstrap css. – YoannLth Apr 24 '16 at 23:28
  • I've edited it again. I think that my last edit will help you the best. I don't want to sound like a douch, but if it does, would you please consider to mark my answer as useful please? I want to get points so I can thank to a guy whom advice helped me a lot but I can't because of this stupid system. Thank you :) – Laker Apr 25 '16 at 20:01
0

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.

BrainHappy
  • 460
  • 2
  • 9
0

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.

kpares
  • 1
  • Thanks, your answer helped me to direct my research. I founded a solution to add a custom media query on an other post -> [link](http://stackoverflow.com/questions/23347701/twitter-bootstrap-3-how-to-activate-navbar-collapse-on-small-devices). – YoannLth Apr 24 '16 at 23:22