对于所有屏幕尺寸，在一个导航中将1st 2nd设置为低于1st

Question

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

 $(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'); } }); }); 

 .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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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="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> 

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

Answer 1

i think you can fixed this problem. Css have media query.

/* smartphone width+height */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
}

 /* smartphone width */
@media only screen and (min-width : 321px) {
}

 /* smartphone height */
@media only screen and (max-width : 320px) {
}

/* such as iPhone4 same high height*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

/* such as iPhone4 same hight width */
@media only screen and (min-width : 640px) {
}

/* iPad width+height */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

/* iPad width */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* iPad height */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

/* desktop browser width */
@media only screen and (min-width : 1224px) {
}

/* desktop browser height */
@media only screen and (min-width : 1824px) {
}

Answer 2

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>