Utilizing Bootstrap 4 to integrate both collapsible and non-collapsible navigation elements

I am working with a bootstrap nav bar and trying to achieve a design where some menu items are collapsible while others remain visible at all times.

Below is the code snippet I am using:

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

<nav class="navbar navbar-toggleable-md navbar-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="https://ngohub.asia">
      <%= image_tag 'ngohublogo.png', class: 'hidden-md-down img-responsive', style: 'width: 100%'%>
        <%= image_tag 'ngohublogo.png', class: 'hidden-lg-up img-responsive w-100'%>
    </a>
    <div class="w-100" style="float:right;">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link">|</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sign Up </a>
        </li>
      </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav 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="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
</nav>

While the login and sign up links display correctly next to the brand on a full-size screen, they do not align as intended with the brand and hamburger icon on mobile view:

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

Here is the layout on a full-width screen

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

In simulated mobile view, I would like the login and sign up links to be positioned alongside the brand and hamburger icon.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

One important update to take note of is that in the latest version of Bootstrap, visibility helpers have been renamed. For example, hidden-md is now replaced with .d-md-none.

Additionally, I ensured to specify flex-direction: row; on .navbar-nav to align its children horizontally rather than vertically.

.navbar .navbar-nav{
  flex-direction: row;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav class="navbar navbar-toggleable-md navbar-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="https://ngohub.asia">
      <img src="https://via.placeholder.com/200x50" class="hidden-md-down img-responsive" style="width: 100%" />
    </a>
    <div style="float:right;">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link">|</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sign Up </a>
        </li>
      </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav 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="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
</nav>

Answer №2

If you're working with Bootstrap 4.1, keep in mind that the navbar-toggleable classes have been replaced with navbar-expand-.

To prevent the navbar items from stacking in a column on smaller screens, apply flex-row to the first navbar-nav. Also, use flex-grow-1 on the collapse to expand the remaining width.

Check out the demo here: 

<nav class="navbar clg navbar-light fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="https://ngohub.asia">
            <img src="//placehold.it/40?text=sm" class="d-lg-none d-inline">
            <img src="//placehold.it/100x30?text=lg" class="d-lg-inline d-none">
        </a>
        <div class="mr-auto flex-shrink-1">
            <ul class="navbar-nav flex-row">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item px-1">
                    <a class="nav-link">|</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Sign Up </a>
                </li>
            </ul>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse flex-grow-1" id="navbarSupportedContent">
            <ul class="navbar-nav ml-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="form-inline d-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </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

Guide to inserting a glyphicon within a bootstrap badge

I've been working on a unique way to display hierarchical data using bootstrap badges and AngularJS. My goal is to create a user-friendly experience where people can easily navigate through categories. There are 3 main types of categories: parent: T ...

cssangularjstwitter-bootstrap

The addClass, removeClass, and css functions in jQuery are malfunctioning

I stumbled upon this website and I am looking to switch the font color from black to white. I attempted various methods but unfortunately, none of them seemed to work: Implementing jQuery's addClass function (to add a class to the SPAN tag) Uti ...

jqueryhtml

Modifying inner content without altering CSS styling

Inside this div, there is a paragraph: This is the HTML code: <div id="header"><p>Header</p></div> This is the CSS code: #header p { color: darkgray; font-size: 15px; Whenever a button is clicked, the innerHTML gets updated: H ...

javascripthtmlcssinnerhtml

Create a function that replaces items with alphabets

My goal is to create a straightforward hangman game. When a category is chosen and the "New Word" button is clicked, a random word from the selected list will be displayed as underscores. As letters are guessed and matched with those in the word, they will ...

htmlrandomhtml5-canvasdraw

Eliminate the need for background video buffering

I have a piece of code that I'm using to remove all the created players for my video elements. The code works fine, but I'm facing an issue where the video keeps buffering in the background after it's changed via an ajax call success. Can yo ...

javascriptjqueryhtmlvideomediaelement.js

Advancing in the Mozilla fashion

Having an issue with my progress bar design... When viewed in Chrome, the value of the progress bar appears in red due to CSS styling I applied... But when opened in Mozilla, it shows up as a dull grey color. progress[value] { width: 250px; height ...

htmlcss

Techniques for parsing a String in Objective-C

I am looking to parse a string to replace certain elements within it. If the string contains an <ol> tag, I want to specifically focus on replacing the <li> elements with numbers. I understand that I can utilize the rangeOfString method to c ...

htmlobjective-ciosxcodeparsing

Steps for printing a web page with a custom stylesheet instead of the default print.css file

I have a print.css file that handles printing website pages, but I now want to create a basic-print.css file specifically for printing out basic information. How can I add a button to the page that triggers the print functionality using basic-print.css ins ...

javahtmlcssprinting

Fixing a menu hover appearance

I recently encountered a small issue with the menu on my website. When hovering over a menu item, a sub-menu should appear. However, there seems to be a slight misalignment where the submenu appears a few pixels below the actual menu item. Check out the w ...

javascriptjqueryhtmlcsshover

Getting the local path of a file from an input file in Angular 7

Is there a way to retrieve the local file path from an input field in HTML? After running the code below, I obtained 'C:\fakepath\fileTest.txt' I am looking for a method to get the local path so that I can pass it on to my control ...

htmlangulartypescriptangular7

Tips for adding a picture to a server and applying CSS filters to enhance it

I recently came across a set of CSS filters that can be applied to images by simply specifying the filter ID. Now, I'm looking to create a button that will allow me to save the edited image (with the filter applied) to a designated file location. I&a ...

javascriptphphtmlcsscanvas

Troubleshooting issue: Failure in proper functionality of Jquery's slideDown

My form is divided into 3 sections, with the latter two initially hidden using CSS. When users click the next button in the first section, the second section is supposed to slide down into view. However, I'm experiencing an issue where the animation s ...

javascriptjqueryhtmlcss

Bootstrap 4 has an enlarged input field when compared to the select input

I am facing an issue with the size of my select field, which appears larger than my two input fields in Bootstrap 4.3. Can anyone provide guidance on how to make the select field match the size of the input fields? Your assistance would be greatly apprecia ...

htmlcssbootstrap-4

Obtaining the XPath for a data table containing two td elements that can be simultaneously clickable

<div class="dataTables_scrollBody" style="position: relative; overflow: auto; height: 370px; width: 100%; min-height: 0px;"> <table id="offer_create" class="display article-list ranklist_drag table table-bordered dataTable no-footer" aria-describe ...

javahtmlcssxpath

Ways to grow a React Component using flexbox to fill the entire page

Currently, I am facing a challenge in creating a sidebar. The issue lies in the container for the element "shrinking to its content." I have explored different solutions such as flex-grow, setting App.css html,body height to 100%, and more, but none of th ...

htmlreactjsflexboxcontainers

Can you explain how this particular web service uses JSON to display slide images?

{ "gallery_images": [ {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433518577.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433519494.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img ...

javascriptjqueryhtmlcssjson

Dropdown menu featuring a customizable input field

Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu? ...

javascriptjqueryhtmlcssbootstrap-4

Creating dynamic images in JavaScript by assigning URL paths from string variables

Currently, I am utilizing JavaScript to parse through an XML file. One interesting aspect of the XML is that it contains URLs which link to images like this one: http://localhost/pic.jpg Throughout the parsing process, I am storing each URL as a string va ...

javascripthtmlxml

Edit the alternative text for an image tag to suit your needs

Is there a way to move the displayed mini popup to the left of the mouse cursor when a user hovers over an image with the following code: <img src="image" alt="product code 000000"> I noticed that the default alt text always appears on the right of ...

htmlcssjqueryimage

Adding an image to your email content using Django

I tried using Django's Email message module to send an email with an embedded image. The image is located in my static folder. I attempted to use HTML code within Python to trigger the email, but the image is not appearing in the email. I have tried s ...

pythonhtmldjangodjango-templatesdjango-email