Bootstrap clearfix only on mobile? - html

Question

This is the code I have for the navbar, which works great on desktop.
<nav class="navbar navbar-inverse navbar-fixed-top" style="border-bottom-width: 2px;">
<div class="container-fluid">
<div clss="navbar-header">
Logo
<button type="button" class="navbar-toggle" style="border-color: #4c4c4c;" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="mainNavBar">
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
</nav>
But my problem is that in mobile, when extended it looks weird:
Now I can add a clearfix div just before the navbar-collapse and that works great in mobile, but not on desktop. Here are mobile and desktop versions with clearfix div:
Desktop with clearfix:
Desktop without clearfix (i.e. how it should be)
Is there a way I can use clearfix only when in mobile or is there a better way of doing it?

Answer 1

You can use one of the responsive utility classes...
<div class="clearfix visible-xs"></div>
http://www.codeply.com/go/T5V1jGonDY

Answer 2

You have coded wrong nav structure that is why this problem arises.
Kindly Remove the div tag inside this mainNavBar div.
See this example: https://getbootstrap.com/examples/navbar-fixed-top/
Make changes in your code as below:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" 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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="mainNavBar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Follow the proper structure of bootstrap no problem will arise.
Hope this will help you. Let me know if there will be any problem?