Title

Wednesday, 21 January 2015

Flat ui nav bar not rendering properly


CSS being used:

http://designmodo.github.io/Flat-UI/css/flat-ui.css  http://designmodo.github.io/Flat-UI/css/demo.css  http://designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css

 <a class="navbar-brand" href="#">Bright Folio</a>   </div>   <div class="collapse navbar-collapse" id="navbar-collapse-01">   <ul class="nav navbar-nav">     <li><a href="#contactModal" data-toggle="modal">Contact</a></li>   </ul>     </div>   <!-- /.navbar-collapse -->   </nav>

I am getting a weird space below and above the Nav Bar

enter image description here

Answer

There is a margin around the nav. Because you have given us links to CSS etc I'm not going to look into where it is. But in this demo you can see the margin is the problem.

CSS:

nav {   margin: 0!important;  }

This is something you can use but I wouldn't recommend using !important. So you could use this, or go into the CSS files and find where nav is being set a margin and remove it.

DEMO HERE

This is how it looks with the margin (without my fix):

DEMO HERE

No comments:

Post a Comment