Bootstrap 4: In collapsed navbar, li items are shown horizontally beside navbar-brand

I've been troubleshooting this issue for hours. It seems like the navbar is not collapsing correctly in Bootstrap 4, causing the next list item to display to the right of the navbar-brand text instead of below it like the other items.

<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
            <div class="container">
              <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
                &#9776;
              </button>
              <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
                <div class="nav-item">
                  <a class="navbar-brand nav-link" href="#">IMGS</a>
                </div>

                <ul class="nav navbar-nav">

                  <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                  </li>
                </ul>

                <ul class="nav navbar-nav pull-sm-right">
                 <li class="nav-item">
                    <a class="nav-item nav-link" href="#">Sign Up</a>
                 </li> 
                 <li class="nav-item">
                    <a class="nav-item nav-link" href="#">Login</a>
                 </li>
                </ul>
              </div>
            </nav>

I have also created a Codepen showcasing the issue: http://codepen.io/NachoSupreme/pen/xEgwJz. Any help would be greatly appreciated!

javascriptjquerycsshtmltwitter-bootstrap-4

Answer №1

It seems like the intention was not for the brand to be wrapped up inside a hamburger menu. If I understand correctly, this is the appropriate UI design.

Give this a shot

<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
<div class="container">
  <a class="navbar-brand nav-link" href="#">IMGS</a>
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <div class="nav-item">

    </div>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>

    <ul class="nav navbar-nav pull-sm-right">
     <li class="nav-item">
        <a class="nav-item nav-link" href="#">Sign Up</a>
     </li> 
     <li class="nav-item">
        <a class="nav-item nav-link" href="#">Login</a>
     </li>
    </ul>
  </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

Issue with Chrome extensions: encountering 'variable undefined' error in the extension despite it being defined in the console

Within my chrome extension's content scripts, I have implemented a dynamic loading mechanism for an external JavaScript file onto an HTML page once it has finished loading. This JavaScript file is responsible for defining a variable called rfk. I have ...

javascriptgoogle-chromegoogle-chrome-extensioncontent-script

What is the method for dividing a string using capital letters as a delimiter?

I am currently faced with the challenge of splitting a string based on capital letters. Here is the code I have come up with: let s = 'OzievRQ7O37SB5qG3eLB'; var res = s.split(/(?=[A-Z])/) console.log(res); However, there is an additional re ...

javascriptregexsplit

Navigating a parameter within an AngularJS directive

I am currently developing a directive that acts as a wrapper for the freebase search widget using jQuery. This is my first attempt at creating a directive and I have encountered some challenges. Here are the functionalities I am aiming for: 1. The ability ...

javascriptangularjsangularjs-directivefreebase

Utilize JavaScript to substitute font family with a designated class name

After discovering a code snippet that can change font family based on ID, I am interested in implementing it on my website but with a twist - using classes instead of IDs. <!DOCTYPE html> <html> <body> <div class="myP">This is a ...

javascriptreplacefont-family

Choose either nth-child or nth-of-type within a nested element

Here is the HTML code snippet: <div class="homepage-body"> <a href="#"> <div class="homepage-item"> <div class="homepage-icon"></div> <div class="homepage-text"> Test1 </di ...

htmlcsscss-selectors

Is it possible to make the info box centered and adjust everything to seamlessly fit on all screen sizes?

Is there a way to create a centered info box that stretches to fit any screen size? ...

javascriptcsshtml

Using Geolocation in HTML5 and JavaScript

Currently, I am working on my debut mobile web application and have successfully integrated Google Maps into it using Geolocation JavaScript API version 3. Now, I am looking to add a button that, when clicked by the user, centers the map on my location o ...

javascripthtmlgeolocation

Sliding Toggle: Panel Revealed with Button Slide

Currently, I am working on implementing a jquery slide tab feature. The functionality is working fine on button click. However, I want the button to stick with the panel and slide along with it. At the moment, the button remains fixed while the panel slide ...

javascriptjqueryhtmlcss

Variation in functionality of onclick in javascript

Can you identify the distinction between the two primary lines of JavaScript in this example? HTML: <html> <body> <form> <input type="button" value="one" id="one" /> <input type="button" v ...

javascripthtmlonclick

Which language is better for refreshing web pages: PHP or Javascript?

May I seek your opinion on this matter? I have the ability to refresh my page using two different methods, but I am uncertain of any potential drawbacks. Can you advise me on which one I should utilize? Edit: Specifically, I am referring to the use of he ...

javascriptphprefresh

Guide: Looping through a typed Viewbag array - best practices

I have passed a List<AdminUsers> through the Viewbag to a view. This list is then assigned to a JavaScript variable and looped through. However, when debugging on the view, I noticed that the for loop is not being executed, even though I set a break ...

javascriptasp.netlistfor-loopdocument-ready

Enhance your React application by making two API requests in

Below is the React Component that I am working on: export default function Header () { const { isSessionActive, isMenuOpen, isProfileMenuOpen, setIsMenuOpen, closeMenu, URL } = useContext(AppContext) const [profileData, setProfileData] = useState({}) ...

javascriptreactjs

showing text from chosen selection with an additional element included in the output

I could use some assistance with this code snippet. My goal is to showcase the options in the format: "Fried Rice = 10.000" as the outcome. However, the issue I am facing is that the select option box also contains the price. What I actually need is for th ...

javascripthtmljquery

Passing a variable by copy in a done call with Ajax

Here's the code snippet I'm working with: for (var i = 0; i < list.length; i++) { $.when( $.ajax({url: "./dorequest.php?id=" + list[i], success: function(response){ jsonFriendlist = response; }}) ).done( ...

javascriptajax

Transmit data from a webpage, via jQuery, to a different webpage

The following code displays the first view, which includes a value that I want to pass along: @foreach (var item in Model.BlogPosts) { @item.Id <---This is the unique identifier I want to pass along <div id="allphotos"><p>Fr ...

jqueryasp.net-mvc

Best practices for storing non-reactive and static data in a Vue application

Welcome to the community! I'm excited to ask my first question here on StackOverflow. I am currently working with vue.js-v2 and webpack. My goal is to ensure that data remains immutable for child components, which are loaded through the vue-router. T ...

javascriptvue.jsvuejs2data-storage

Angular URL changes causing template flickering

Currently, I am in the process of developing a small application using Angular, but I am encountering an issue with template flickering. This problem occurs when one template is displayed briefly and then immediately switches to another. In my base templa ...

javascriptangularjs

Displaying a header on each page along with a gridview that has authentic pagination

I'm struggling with setting up my header div and grid view to print correctly across multiple pages. The header div looks like this: <div id="header" style="width:100%; padding: 6px; margin-right: 20px; border-top-style: dotted; border-color: inh ...

htmlasp.netgridviewprintingpaging

htmlEnhance your webpage with a native-like combobox

<!DOCTYPE html> <html> <body> <form action="demo_form.asp" method="get"> <input list="browsers" name="browser" placeholder="choose browser"> <datalist id="browsers"> <option value="Internet Explorer"> ...

htmlcss

Compatibility of Bootstrap 4 with collapsible elements and display utilities

I have noticed an issue with Bootstrap 4 display utilities not functioning properly with the .collapse class, a feature that worked seamlessly with Bootstrap 3. Despite my efforts to research this problem, I have been unable to find similar inquiries regar ...

htmlcssbootstrap-4display