How can I keep a collapsible navbar from wrapping underneath an image?

I am having difficulty preventing the collapsed navbar from wrapping under the image when the resolution drops below 476px. I attempted to use d-sm-inline-block in my <nav> tag but it still wraps.

I have included an image demonstrating the current behavior of the code. The actual image is excluded from the code as I am developing this in a Django Template.

Created using Bootstrap4

https://i.sstatic.net/qdu9B.png

<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">

    <img class="img-fluid picture-padding" src="temp" alt="temp">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">

      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>
</nav>
htmlcssbootstrap-4

Answer №1

If I grasp the gist of your inquiry correctly, it appears that you're endeavoring to incorporate a logo into a responsive bootstrap 4 template. If my assumption is on point, substituting the following line:

<img class="img-fluid picture-padding" src="temp" alt="temp">

With:

<a class="navbar-brand" href="#">
    <img src="temp" width="30" height="30" alt="">
</a>

Should achieve the desired outcome.

Below is the complete code for the bootstrap 4 template page utilized:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
        <!-- <a class="navbar-brand" href="#">Logo</a>   -->
        <a class="navbar-brand" href="#">
            <img src="./test.png" width="30" height="30" alt="">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Links -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">

          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link 3</a>
            </li>
          </ul>
        </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Here is the mobile output:

https://i.sstatic.net/RveeL.png

And here is how it displays on desktop:

https://i.sstatic.net/aut0Y.png

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

Adjust the appearance attribute of FormField within the designated theme

Currently, I am collaborating within an NX Monorepo and utilizing a shared ui-components library that extends the capabilities of Angular Material Components. Despite using different themes for various applications, I am aiming to incorporate appearance=&a ...

cssangularangular-material

Crafting web design with media queries to ensure responsiveness

I have been working on creating a responsive webpage. While the header and footer are resizing properly when the browser is reduced in size, the navigation section is not behaving the same way. Currently, shrinking the page is causing the navigation block ...

htmlcss

Strange behavior of focus()

My objective is to launch a popup containing an input field and automatically bring focus to that input. I have attempted using $('#input').focus(), $('#input').first().focus(), and $('#input')[0].focus(), but unfortunately, ...

javascriptjqueryhtmlsetfocusautofocus

Unable to alter the height of the element

I am attempting to resize an element by dragging, similar to this example. I have created a simple directive for this purpose: @Directive({ selector: '[drag-resize]' }) export class DragResizeDirective { private dragging: boolean; const ...

javascriptcssangular

Implement an event listener on the final element of a webpage utilizing querySelector

I need help with a password security check feature that changes field borders to green or red based on certain conditions. Despite successfully implementing it, the JavaScript code only selects the first field (nickname) instead of the last one. I've ...

javascripthtmlselectaddeventlistenerqueryselector

Encountering an error in Django: "Reverse for 'book' with the argument '(1,)' could not be found. Attempted pattern: '<int:flight_id/book\Z'"

Currently, I am in the process of learning the Django framework. Today, I experimented with retrieving a URL in an HTML template using the following code snippet: <form action="{% url 'book' flight.id %}" method="post"> ...

pythonhtmlsqldjangodjango-models

The solution to enabling multiple inputs when multiple buttons are chosen

Below is a link to my jsfiddle application: http://jsfiddle.net/ybZvv/5/ Upon opening the jsfiddle, you will notice a top control panel with "Answer" buttons. Additionally, there are letter buttons, as well as "True" and "False" buttons. The functionali ...

javascriptjqueryhtml

Maintaining consistent div height in Bootstrap 4 flexbox design

I'm currently using Bootstrap 4 with flexbox enabled, but I'm having trouble making the row > col > div boxes have equal heights. I attempted to use position: absolute, but it's not the ideal solution. Below is a screenshot of the is ...

htmltwitter-bootstrapcssflexbox

Best way to eliminate empty options from dropdown and ensure that required validation is functioning in AngularJS?

My dropdown is populated with owners from the owners data, but it includes an extra blank option. I need to eliminate this blank option. However, when I make the necessary changes to remove it, the required validator stops working properly. <md-input-c ...

javascripthtmlangularjs

Fixed positioning on scroll on the right side

I need assistance to create a fixed right side with scrollable content on the left. I attempted using position: fixed for the left div but it didn't work as expected. Can someone please assist me with this? Link to the product ...

jquerycss

Exploring the images in a continuous loop

Looking to create a unique image looping effect using HTML, CSS, and Jquery/Javascript. The concept is to display several images on one page that do not move, but loop through them one at a time while displaying text above the current image. For example, ...

javascriptjqueryhtmlcss

Footer Display Problem in CSS

Have you ever experienced a situation where your content is running low, and the footer ends up right under it? Instead of fixing it at the bottom using a fixed position or any other method, why not make everything below the footer match the background col ...

htmlcss

Is there a way to mimic this type of scrolling effect?

Upon visiting this website, it is evident that the entire interface has been constructed with React. The scrolling experience on this site is exceptionally smooth, although it may feel slightly more substantial than a typical scroll. After researching onli ...

javascriptjquerycss

Creating styles for different screen sizes including mobile devices, low-resolution desktops, and high-resolution desktops

One of the techniques I'm using involves analyzing both the horizontal and vertical screen dimensions to differentiate between mobile devices and desktops, as well as distinguish high-resolution from low-resolution desktop displays. In order to achie ...

htmlcssmobile

The custom font is failing to load on a basic HTML website

I've been exploring different code and examples online in an attempt to incorporate a custom font into my simple HTML website. Just for reference, I'm using Django. Key files to note: aurebesh_translator.html <!DOCTYPE html> <html> ...

htmlcssdjangofonts

What is the method for creating a background similar to that found on the Bootstrap homepage?

body>div { background-color: red; } <div>Additional content here</div> Looking for assistance in achieving a similar background to the one on the bootstrap main page. I attempted using a gradient, but was unable to achieve the desired re ...

cssbootstrap-5gradient

How can I define margins for a specific div in print media using CSS?

Hello everyone, I'm currently experiencing an issue with my print media CSS. On the HTML page, there are two main divs - one for the body and one for the footer. <div class="main-template-body" id="main-template-body"> //content </div> ...

htmlcssprinting

Creating a well-aligned form using Material-UI

Exploring Material-UI for the first time! How can a form be built where certain fields are arranged horizontally, others stacked vertically, and all aligned perfectly both vertically and horizontally? Check out this example image: https://i.sstatic.net/5R ...

javascripthtmlcssreactjsmaterial-ui

Do you know the name of the jQuery tool that Mashable employs for showcasing their top 5 images and videos?

Recently, I came across an image scroller on Mashable that caught my eye and I am interested in incorporating it into a new project: I saw it in action on the website, but I am curious about what it actually is. Does anyone know if it is available as a W ...

jquerycssimage

Is there a way to change an HTML document into a Word file?

I am looking for recommendations on libraries that can help me save HTML documents in memory as Word .DOC files. Any suggestions for both closed and open source options are welcome. Additionally, could someone provide links to these libraries based on the ...

htmlms-word