Prior to stacking the divs, separate the line within the div

In the process of creating a responsive navbar with Bootstrap, I encountered an issue. When resizing the window to a smaller size, the collapse icon shifts from the top right position below my "logo".

Here is how the site appears on a regular screen: https://i.stack.imgur.com/CYtzm.png

This is the view on a mobile screen: https://i.stack.imgur.com/BYnBS.png

My desired layout involves breaking the line before moving the collapse button beneath itself:

https://i.stack.imgur.com/rUBw2.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <style>

        </style>
    </head>

    <body>
        <nav class="navbar navbar-expand-lg navbar-light fixed-top py-4 py-md-5 px-sm-4 px-md-5" style="background-color: aquamarine">
            <div id="navbar-logo" class="logo ml-2" style="font-size: 20px; letter-spacing: 10px;">
                PRENAME SURNAME
            </div>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="toogleMenuBackground()">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse pt-3 pt-md-4 pt-lg-0" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link">home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">about</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">more</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">content</a>
                    </li>
                </ul>
            </div>
        </nav>
    </body>
</html>

You can find the above HTML code on Codepen

htmlcsstwitter-bootstrapresponsive-designresponsive

Answer №1

To control the width of this div, you need to specify its maximum width.

You can set a specific value for the .logo size if you know what it will be, or you can opt for a more flexible approach that accounts for potential changes in the future. For example, you could indicate that the .logo should take up to 100% of the width while considering the size of the navigation button and margins, like so:

.logo {
    max-width: calc(100% - 64px);
}

If you prefer not to add extra CSS and only use Bootstrap classes, you can utilize display:flex. By applying the classes 

d-flex flex-nowrap justify-content-between
to your navigation elements, you achieve the desired layout without additional styling:

<nav class="navbar navbar-expand-lg navbar-light fixed-top py-4 py-md-5 px-sm-4 px-md-5 d-flex flex-nowrap justify-content-between">

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

Enhance your browsing experience by inputting valuable information into the

I am looking to enhance a text box by adding values. The text box already has a default value of 10, and I want to create a button that will add new text boxes with a limit of 4. My goal is to continuously add values from text box 1 to text box 4. For exa ...

javascripthtml

Preserve the div's aspect ratio using CSS styling

Is there a way to design a flexible div element that adjusts its width and height in sync with the window's size changes? Do any CSS techniques exist that would allow the height of the div to adapt based on the width, while still preserving its aspec ...

htmlcssresponsive-designaspect-ratio

How can I open a new window, redirect the current one, and bring focus to the new window using JavaScript?

Trying to troubleshoot a problem I'm having with the following setup: - Using SAP Portal, I am launching an HTML page containing this code. - The goal is for the HTML page to open a new window. - Once the new window opens, the original HTML page ...

javascripthtmlwindow.open

What is the best way to increase padding in a Vuetify view element?

I have been attempting to increase the padding of my view by utilizing the "px-5" class on the container within the view. However, I am struggling to achieve the desired amount of padding. What I am aiming for is padding similar to what is shown in this sc ...

cssvue.jsvue-componentvuetify.js

What is the best way to arrange div elements in this particular manner using CSS?

Wanting to create a specific layout for my website by positioning some divs in a unique way and adding content to them, I have been focusing on responsive design. I am wondering if it is possible to position these divs while ensuring responsiveness. The de ...

htmlcss

Click on the button to convert the content of the text area into a variable

Is there a way to capture all the text inside a textarea or input field as a variable upon button click using jQuery or JavaScript? The .select() function doesn't seem to achieve this, instead displaying numerous CSS properties when logged. What app ...

jqueryhtml

Unique solution: "Using CSS to ensure the overflow document always scrolls to the bottom

Is there a way in CSS to make a div with overflow: scroll always automatically scroll to the bottom along the Y-axis, regardless of its content? For example, like a chat thread that consistently displays the latest message at the bottom. I've encount ...

css

The value in the textarea will stay unchanged even after the form has been submitted

I recently resolved my previous issue, but now I am seeking advice on how to prevent a textarea from clearing its input after submitting a form. You can view the jsFiddle here: http://jsfiddle.net/rz4pnumy/ Should I modify the HTML form? <form id="for ...

javascriptjqueryhtmlforms

What is the best way to display HTML content from a stored object?

In my project using Next.js, I am faced with the challenge of rendering custom landing pages based on their unique URLs. While I have successfully retrieved all the necessary details from the database for each specific URL, there is a particular object con ...

htmlreactjsnext.jsrenderingmern

Having trouble rendering components due to conflicts between React Router and Semantic UI React

Below is the code in my App.js: import { useRecoilValue } from 'recoil'; import { authState } from './atoms/authAtom'; import { ToastContainer } from 'react-toastify'; import { ProtectedRoute } from './layout/ProtectedRou ...

javascriptcssreactjssemantic-ui-react

Displaying background images as list items on a web page outside of

I am facing an issue with an unordered list within a div where the list item images are floating outside the div. Does anyone have a solution for this? You can see an example of the problem on Any assistance would be greatly appreciated! ...

csslist

Ways to access a DOM element in Next.js when the class name is dynamically generated

I am currently developing a Next.js app (version 12.1.0) and facing an issue in my Nav component. I am attempting to select a DOM element using const nav = document.querySelector('.nav'); However, this is triggering an error message: TypeError: ...

csssassnext.jscss-modules

Centralized navigation bar

I am currently facing a challenge with centering my nav bar and I'm not sure how to proceed. The nav bar is placed within a class and a div, which is causing confusion for me. I have attempted to align it to the center and also tried using float:cente ...

htmlcss

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden ...

javascriptjqueryhtmlcss

Tips for showing a single table with buttons on display

I am using R markdown and have included multiple tables with buttons, but when I open the file, all tables are displayed at once. How can I ensure only one table is shown upon opening the file? <script type="text/javascript"> function sh ...

javascripthtmlr-markdowndata-science

Personalizing a class specifically for error messages within the jQuery Validation plugin

When using the jQuery Validate plugin, is it possible to set a separate class for the error message element without affecting the input element's class? ...

jquerycssjquery-validate

- Bullet point: Table heading alignment variation

When it comes to centering a <th> element inside an <li>, different browsers have different approaches. In Internet Explorer, Edge, and Safari, the <th> is center-justified. However, in Chrome, Firefox, and Opera, it's left-justifie ...

csshtmlcross-browser

What is the best way to display the elements of an array within an HTML div element?

I've been trying to display the contents of an array in a div container on my HTML file, but I'm stuck. Here's what I currently have: function printArray() { var $container = $('.container'); $container.html(''); ...

javascriptjqueryhtmlarrays

Setting the minimum and maximum width of a div using Bootstrap, not based on the number of columns

I want to adjust the number of columns based on the width of the screen rather than choosing a specific value like 3, 4, 5, or 6. ...

htmlcss

Pulling out a particular row from an HTML table with the help of HTML::TreeBuilder

I am a beginner in perl programming and I am facing a major challenge. I need to parse an HTML file that contains a single table, and extract a specific row based on one of its column entries. Here is a snippet of the HTML file: many previous rows descri ...

htmlperlhtml-table