relocate the collapsed navbar to a different div when viewing on a mobile device

My current setup includes a logo div followed by a navbar. When viewed on smaller screens like mobile phones, I collapse the navbar. However, I want the collapsed navbar to be positioned next to the logo image.

Is there a way to make the collapsed navbar appear beside the logo div? https://i.sstatic.net/YIAc4.png

Any suggestions on how to achieve this?

        <div class="container-fluid bg-light">
            <div class="row"><img src="logo.jpg" class="float-left ml-3 img-responsive" width="250" height="150" /></div>
        </div>
        <nav class="navbar navbar-expand-md navbar-light bg-primary container-fluid">

            
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="navbar5">
                <ul class="navbar-nav ">
                    <li class="nav-item px-3 active">
                        <a class="nav-link" href="#">Menu1 <span class="sr-only">Menu1</span></a>
                    </li>
                    <li class="nav-item px-3">
                        <a class="nav-link" href="#">Menu2</a>
                    </li>
                    <!-- Dropdown -->
                    <li class="nav-item px-3 dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                            Menu3
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Menu4</a>
                            <a class="dropdown-item" href="#">Menu5</a>
                        </div>
                    </li>
                    <li class="nav-item px-3">
                        <a class="nav-link" href="#">Menu6</a>
                    </li>
                    <li class="nav-item px-3">
                        <a class="nav-link" href="#">Menu7</a>
                    </li>
                    <li class="nav-item px-3">
                        <a class="nav-link" href="#">Menu8</a>
                    </li>
                    <li class="nav-item px-3">
                        
                    </li>
                </ul>

            </div>

        </nav>

I'm utilizing Bootstrap 4 for this task.

htmlcssbootstrap-4

Answer №1

One way to structure your layout is by wrapping the logo and navbar within grid columns. Adjust the first column to shrink to fit (col-auto) when the Navbar collapses, and use col for the Navbar column. In other cases, both columns should be full width (col-md-12) on md and wider...

<div class="container-fluid bg-light px-0">
    <div class="row no-gutters align-items-center">
        <div class="col-md-12 col-auto">
            <img src="//placehold.it/250x150" class="float-left ml-3 img-fluid" width="250" height="150">
        </div>
        <div class="col-md-12 col">
            <nav class="navbar navbar-expand-md navbar-light bg-primary container-fluid">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse" id="navbar5">
                    <ul class="navbar-nav ">
                        ...
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

Remember, the Bootstrap 4 row should only contain col*, so place the logo img within the appropriate col.

Check out this link for more details.

UPDATE:

If you're seeking further clarification, take a look at this example: More information here.

Answer №2

<header class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="brand-logo" href="#">
     <img style="width: 80px" 
   src="http://pngimg.com/uploads/intel/intel_PNG25.png" alt=""></a>
  <button class="toggle-button" type="button" data-toggle="collapse" data- 
  target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
  aria-expanded="false" aria-label="Toggle navigation">
   <span class="toggler-icon"></span>
   </button>

   <div class="collapse-menu" id="navbarSupportedContent">
    <ul class="nav-links mr-auto">
     <li class="nav-item active">
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
    <form class="search-form" action="" method="get">
     <input class="search-input" type="search" placeholder="Search" 
      aria-label="Search">
  <button class="search-button" 
  type="submit">Search</button>
   </form>
   </div>
  </nav>

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

Adjusting the position of text within a table cell using HTML

My task is to design a website using only tables (the old-fashioned way). I've made some progress with the layout, but being limited to tables and HTML poses some challenges. <body> <table width="1173" height="703" cellspacing="0" cellpaddi ...

html

When it comes to handling media queries, iPhone is geared towards min-width dimensions of 768

The layout of my landing page has a CSS structure that looks like this: body { background: white; } @media (min-width: 768px) { body { background: red; } } @media (max-width: 767px) { body { background: blue; } } Des ...

cssresponsive-designmedia-queries

Divs sliding out of alignment

I am experiencing an issue with the scrolling behavior of a wrapper div that contains two nested divs. Specifically, when I scroll the wrapper horizontally on Android devices, the header section and content section seem to be out of sync and there is a not ...

javascriptandroidcssscroll

Is it possible to move a directive within a limited parent element?

Is there a way to limit the movement of an angular.js drag directive within the confines of its parent element? You can see the problem I'm facing in this jsbin: http://jsbin.com/maxife/3/edit?html,css,js,output ...

javascripthtmlcssangularjsangularjs-directive

Is there a way to change HTML retrieved from an AJAX request before inserting it into the document?

I am utilizing an ajax call to retrieve an HTML page from the server; the ajax call is structured as follows: function loadHtml() { $.ajax({ type : 'GET', async : false, url : &apos ...

javascriptjqueryhtmlajax

Tips for shifting objects from a horizontal row to a designated vertical column when switching to a smaller display

I am currently utilizing bootstrap to enhance my website layout for mobile view. The main challenge I'm facing involves transitioning items from a row to a column in a specific order. In this case, I have two items in a row and I would like the first ...

htmlcssbootstrap-4

Step-by-step guide to triggering the inactive dropdown function by selecting a different menu item

This issue seems to have cropped up recently, possibly due to multiple changes being made. The main problem is figuring out how to deactivate a dropdown menu when another menu item is clicked. As shown in the image below, it appears that two items are sele ...

javascriptjqueryhtmlbootstrap-4sidebar

Switching Text Box Content When Hovering Over a Static Element: A Fail-proof Method

Even though I followed the solution from another source, the Description I set still refuses to show up in the text box. I have already attempted this: How To Change Text Box Content On Hover I meticulously checked every class name and every bracket in th ...

htmlcsshover

Using html as a template parameter in django

When passing HTML to my template, I am using the following code: passDict["problemText"] = <p> Some html</p> return render(response,'main/base.html',passDict). However, when trying to display {{problemText}} in my HTML file, I only se ...

htmldjangotemplates

Exploring Angular 4.0: How to Loop through Numerous Input Fields

I am looking to loop through several input fields that are defined in two different ways: <input placeholder="Name" name="name" value="x.y"> <input placeholder="Description" name="description" value"x.z"> <!-- And more fields --> or lik ...

javascripthtmlcssangulartypescript

Validating Color Properties with CSS 3.0

When using Visual Studio 2012 (Ultimate), a red squiggly may appear indicating that rgba(255, 255, 255, 0.4) is not a valid color property value However, according to the W3C, it is considered a valid value. Could this be a bug in Visual Studio, or am ...

cssvisual-studiow3cw3c-validation

"The JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Here is the index.html code for a simple VueJS app that includes a widget from netvibes.com. The widget code is added in the html file and functioning properly. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC " ...

javascripthtmlvue.jsjspwidget

How can I extract the document that is generated when a button is clicked using BeautifulSoup?

Trying to utilize BeautifulSoup for scraping my banking website to automatically retrieve the generated PDF from monthly purchases. Successfully logging in and reaching the page with the button, but the button does not seem to be a simple link - possibly a ...

pythonhtmlweb-scrapingbeautifulsoup

Enhancing Jquery Accordion with a new attribute for seamless transitions

I'm looking to adjust the font size for the title section of the accordion found here body { font: 16px Sans-Serif;<br> } The challenge I'm facing is that I already have a "body" attribute in my site that overrides the code above. Is th ...

jqueryhtmlcssjquery-ui-accordion

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...

htmlcssflexbox

Is the HTML5 type of button functioning properly, while the type of submit is not working as

Looking to validate a form before running a JavaScript function? Check out this code snippet: function updateMap() { //dummy } <form> <div class="group"> <input type="number" id="hour" min="0" max="23" required> <span cl ...

javascripthtml

Exploring Vue 3: Choosing between using import statements in main.js and configuring additionalData in vue.config.js to load a global scss file

I am attempting to load a global SCSS file using the "vue.config.js" file. vue.config.js module.exports = { css: { loaderOptions: { sass: { additionalData: `@import "@/assets/common.scss";` } } } } If I include the style tag in my App. ...

javascriptcssnode.jsvue.jssass

Use jQuery to swap out two div classes within a table cell (TD) if they are

Although I'm making progress, I must confess that jQuery and CSS are not my strong suits. The objective: To create a dynamic div within a table data cell for a calendar feature. The content of the div varies based on the date range input. A filled d ...

javascriptjqueryhtmlcss

What is the best way to create scrollable content inside a container?

To accommodate more fields within my fixed-position container, I need to increase its height. However, instead of doing this, I believe adding a scroll bar to the container and making its contents scrollable would be a better solution. The challenge now i ...

htmlcssscrollcontainersscrollbar

Text superimposed on an image

Hey everyone, so I'm currently working on building my very first website and I decided to start off using a template that I found online. The layout of the pages consists of 2 columns with div tags - one for text on the left side and the other for ima ...

htmloverlapping