Place the second division beneath the first within a single navigation bar that adjusts accordingly to all screen sizes

I am experiencing an issue with the layout of my page that has 2 divs within one nav element. When the screen width is greater than 1024px, everything looks fine. However, when I reduce the width to less than 768px, the two divs merge into one line instead of remaining on separate lines. I want them to stay in two different lines even as 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/

javascripthtmlcss

Answer №1

I have utilized the clearfix class on .mc-partner-nav by incorporating bootstrap's 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 collaboration 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>

Answer №2

It is possible to resolve this issue by utilizing CSS media queries.

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

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

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

/* Styles for devices with high pixel ratio like iPhone4 */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

/* Styles for devices with same height as iPhone4 */
@media only screen and (min-width: 640px) {
}

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

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

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

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a graph that can retrieve and showcase information stored in a Rails database

Is there a way to incorporate a graph into a Ruby on Rails application that can access and show data from a database file (.rb)? If so, what would be the most optimal approach for achieving this? ...

javascriptjqueryruby-on-railsruby-on-rails-3

Determining the exact number of immediate descendants within a ul element, while disregarding any script elements

Here is the HTML structure I am working with, which contains a script tag: <ul id="list"> <li class="item1"><a href="#">Item 1</a></li> <li class="item2"><a href="#">Item 2</a></li> <li ...

javascriptjquery

The shadows in Three Js are functioning correctly, although there are a few shadow lines visible below my model

I am currently in the process of modifying a three.js scene, despite having little experience with javascript and three.js. After successfully adding a shadow to my GLTF model, I noticed some yellow and red lines beneath the model that I cannot identify or ...

javascriptthree.jsgltf

Animate the centering of a DIV

Currently, I am working on an animation featuring a series of DIV's contained within a div with the identifier id="wrapper", all styled using CSS3. However, when I hover over the rounded box, the animation is not properly aligned in the center. You ca ...

htmlcsscss-animations

Change the data-theme using jQuery Mobile once the page has finished loading

I am facing an issue with my buttons in a control group that represent on/off functionality. Every time I click on one of the buttons to switch their themes, the theme reverts back once I move the mouse away from the button. How can I make sure that the ...

javascriptajaxjquerymobile

The MVC framework causing the Morris chart to omit the final xkey value

I am facing an issue with my Morris Chart where it is not displaying the last xkey value. Any thoughts on why this might be happening? https://i.stack.imgur.com/mHBQd.png Here is the data I am working with: [{"Date":"2016-07-17","Average":0.0},{"Date":" ...

javascriptasp.net-mvcmorris.js

Nested data selection in React

I have been experimenting with creating a nested select optgroup and attempted the following: const data = [ { sectorId: 5, sectorName: "Sector One", departments: [ { deptName: "Production", jobtitles: [ { ...

javascripthtmlreactjsselectoptgroup

The completion action is never carried out

I am currently facing an issue with one of my JavaScript functions. I have several $.ajax calls throughout my webpage followed by .done(), and they all seem to be functioning properly, except for one. Can anyone identify what could be causing the error? m ...

javascriptjqueryajax

Using TypeScript to define values with the placeholder "%s" while inputting an object as a parameter

One common way to decorate strings is by using placeholders: let name = "Bob"; console.log("Hello, %s.", name) // => Outputs: "Hello, Bob." I'm curious if there's a way to access specific values within an object being passed in without specif ...

javascripttypescriptunit-testingjestjsdecorator

Enlarge the div with a click

I was looking for a solution on how to make a div expand when clicked using jQuery I came across a tutorial that seemed simple and perfect, but I couldn't get it to work when I tried to replicate the code. Do you know if this code is still valid wit ...

javascriptjquerycssonclick

Placement of navigation bar on top of picture

Creating a gaming website and encountering challenges with text alignment. The goal is to have the navbar text positioned on top of a customized navbar background. Current appearance navbar example <!DOCTYPE html> <html> <head> ...

htmlcss

The android webview is having trouble loading HTML that includes javascript

I have been attempting to showcase a webpage containing HTML and JavaScript in an android webview using the code below. Unfortunately, it doesn't seem to be functioning properly. Can someone provide assistance? Here is the code snippet: public class ...

javascriptandroidhtmlandroid-webview

What causes certain event handlers to be activated when using dispatchEvent, while others remain inactive?

When it comes to event-based JS, there are two main APIs to consider: event listeners and event handlers. Event listeners can be registered using addEventListener, while event handlers are typically registered with an API similar to target.onfoobar = (ev) ...

javascripteventsbrowserdom-events

Utilizing Backbone script for fetching data from an external JSON source

I am seeking assistance on how to utilize a Backbone script to display data from a JSON file. Here is the structure of the HTML Page: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</tit ...

javascriptjqueryjsonbackbone.js

Is it advisable to include cursor:pointer in the pseudo class :hover?

Which option is better to use? .myclass { cursor: pointer; } or .myclass:hover { cursor: pointer; } Is there a notable difference between the two? ...

csspseudo-class

Expect a reply within the loop

One of my endpoints takes some time to generate data, and I have another endpoint to retrieve that generated data. I make the initial call using await, extract the ID from the response, and then keep calling the second endpoint until the status is not "Suc ...

javascriptreactjstypescriptasync-awaitaxios

What is the best way to destructure an array enclosed within the Promise keyword in JavaScript?

Currently, I am attempting to extract information from a PSQL table using the following code: async function requestData() { var selectQuery = `SELECT "fName", "lName", "phoneNumber", "eMail" FROM public."Use ...

javascriptnode.jspromisepsqlasynchronous-javascript

Tips for keeping my background image from shrinking when I resize the window?

When I resize the webpage window, my background image shrinks in size. Currently, it is not repeating (which is a step forward), but now I need it to cover the entire screen to avoid showing white space around the background when the window gets smaller. ...

htmlcss

Minimizing the distance between radio label rows

I'm working on a radio button with a label spanning two lines, but the whitespace between the lines is too much. I need to reduce it. Here's my code example: <label for="reg-promo"> <input type="radio" name="promotion" id="registerPr ...

htmlcssvue.jsradio-button

Exploring the World of Micro-Frontends with the Angular Framework

I am conducting research on the best methods for transitioning a large single-page application into a micro-frontend architecture. The concept: The page is made up of multiple components that function independently Each component is overseen by its own ...

javascripthtmlangularmicroservices