Michelle Ashwini Michelle Ashwini - 2 months ago 7
HTML Question

Set 2nd div below 1st in one nav for all screen size

I have a page with 2 divs in one nav. When the screen size has a width of more than 1024px, everything in that page looks as I want it to. But once I reduce the width to be smaller than 768, the 2 div 'merges' with the 1st and displays it as one line instead of the original 2. I want it to still be in 2 different lines when the screen size decreases

HTML

<nav class="navbar navbar-default mc-navbar">
<div id="product-nav">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="caret"></span>
</button>
<a href="manage.php" class="navbar-brand mc-navbar-brand">Product 1</a>
<div id="navbar" class="collapse navbar-collapse nav-pills">
<ul class="nav navbar-nav navbar-right mc-navbar-right">
<li><a href="manage.php">Manage</a> </li>
<li><a href="diagnose.php">Diagnose</a> </li>
</ul>
</div>
<div class="mc-partner-nav">
<div class="mc-partner"> In partnership with <a href="#partner" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" id="logo"></a> </div>
</div>
</div>
</nav>


CSS

.mc-navbar{
font-size: 17px;
background-color:#f8f8f8;
border-color:#ffffff;
margin-bottom:0;
}


.navbar-default .mc-navbar-brand {
color: #3c6190;
}

.navbar-default .mc-navbar-brand:focus, .navbar-default .mc-navbar-brand:hover {
color: #3c6190;
}

.mc-navbar-right{
font-size: 16px;
margin-right: 0;
}

.mc-partner-nav{
background-color:#FFFFFF;
}

.mc-partner{
margin-right: 20px;
text-align: right;
font-family:'Open Sans', sans-serif;
font-weight:300;
line-height:30px;
font-style: italic;
font-size:18px;
}

#logo{
margin-top:10px;
margin-bottom:10px;
width:150px;
}


Javascript

$(document).ready(function() {
var navpos = $('#product-nav').offset();
console.log(navpos.top)
$(window).bind('scroll',function(){
if ($(window).scrollTop() > navpos.top) {
$('#product-nav').addClass('fixed');
}
else {
$('#product-nav').removeClass('fixed');
}
});
});


Link to jsfiddle https://jsfiddle.net/3L1ygooa/1/

Answer

I've applied clearfix to .mc-partner-nav using bootstrap row and col-xs-12 classes

.mc-navbar {
  font-size: 17px;
  background-color: #f8f8f8;
  border-color: #ffffff;
  margin-bottom: 0;
}

.navbar-default .mc-navbar-brand {
  color: #3c6190;
}

.navbar-default .mc-navbar-brand:focus,
.navbar-default .mc-navbar-brand:hover {
  color: #3c6190;
}

.mc-navbar-right {
  font-size: 16px;
  margin-right: 0;
}

.mc-partner-nav {
  background-color: #FFFFFF;
}

.mc-partner {
  margin-right: 20px;
  text-align: right;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 30px;
  font-style: italic;
  font-size: 18px;
}

#logo {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 150px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>



<nav class="navbar navbar-default mc-navbar">
  <div id="product-nav">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
      <span class="caret"></span>
    </button>
    <a href="manage.php" class="navbar-brand mc-navbar-brand">Product 1</a>
    <div id="navbar" class="collapse navbar-collapse nav-pills">
      <ul class="nav navbar-nav navbar-right mc-navbar-right">
        <li><a href="manage.php">Manage</a> </li>
        <li><a href="diagnose.php">Diagnose</a> </li>
      </ul>
    </div>
    <div class="row mc-partner-nav">
      <div class="col-xs-12 mc-partner"> In partnership with
        <a href="#partner" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" id="logo"></a>
      </div>
    </div>
  </div>
</nav>