Utilize Bootstrap 4 to seamlessly switch between nav-pills for larger screens and navbar-nav for smaller screens

On larger screens, I prefer the appearance of the nav pills. However, once the collapse button appears, I would like the menu to stack and resemble the image provided instead of the pills. Do I require custom CSS to achieve this?

<div id="menu" class="navbar navbar-expand-md">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".main-nav-collapse" aria-controls="main-nav-collapse" aria-expanded="true" aria-label="Toggle navigation">
        <span class="fa fa-bars"></span>
    </button>
    <div class="collapse navbar-collapse main-nav-collapse">
        <nav class="nav nav-pills mr-auto">
            <a class="nav-link" href="/"><i class="fa fa-home"></i></a>
        </nav>
    </div>
</div>

This layout is desired for smaller screens.

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

I want to display these pills on larger screens but not on smaller ones.

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

csstwitter-bootstrapbootstrap-4navnav-pills

Answer №1

Here is how I achieved this using the code snippet below.

<nav class="nav nav-pills mr-auto flex-column d-md-flex flex-md-row">

Answer №2

You have the option to interchange the classes d-none and d-flex at this point.

The reason for using d-flex instead of d-block here is because the .nav class is constructed with flexbox, making flex more suitable than block.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- TILL 1200PX (XL) -->
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex d-xl-none">
  <a class="navbar-brand" href="#">Navbar</a>
  <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="#" tabindex="-1" aria-disabled="true">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>

<!-- AFTER 1200PX (XL) -->
<ul class="nav d-none d-xl-flex">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb9b849b9b8e99c58198abdac5daddc5db">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

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

Difficulty with Flexbox in Internet Explorer 11 when utilizing a Bootstrap .badge element

At the moment, I am dealing with a flex-row that contains an element that grows with the available space and a badge that should be aligned to the end without growing. However, when using flex-grow: 0 in IE11, the span.badge does not even take up the width ...

cssflexboxinternet-explorer-11bootstrap-4

The absence of an eye icon in the password field when using bootstrap 5

I'm having trouble positioning the eyeball icon to the right side of my form when using Bootstrap v5 and FontAwesome v5. Instead, the password field is being shifted further to the right compared to the username field, and the eye icon is not displayi ...

htmlcssbootstrap-5font-awesome-5

Adjusting the Size of Dialog Windows in Lightswitch HTML Client

When using the MS Lightswitch HTML Client, if a dialog menu option contains too many characters to fit within the length of the dialog window, the text will be cut off and replaced with (...). Is there a way to add a scroll bar or adjust the text size in ...

jqueryhtmlcssvisual-studio-lightswitchlightswitch-2013

Sass Alert: The mixin called roboto-family is missing from the stylesheet. Trace: Problem detected in src/pages/forms/forms.scss at

Greetings, I am diving into the world of Ionic for the first time. Recently, I embarked on a new project in Ionic and decided to integrate a theme. To do so, I copied an .html file, an .scss file, and also created a .ts file. Forms.html <!DOCTYPE html ...

csstypescriptionic-frameworksass

Excessive Font Awesome Icons causing navigation bar to appear oversized

My Font Awesome icons are causing my navbar to expand in height. Despite resetting all margin and padding to 0, adjusting the margins and paddings of the icons has not helped. I even tried setting negative top and bottom margins/paddings. https://i.sstati ...

htmlcsstwitter-bootstrapfont-awesome

Tips on transforming button-controlled tab pages in Bootstrap 2 to Bootstrap 3

I am currently in the process of upgrading my website from Bootstrap 2 to Bootstrap 3, and I have encountered an issue with a specific control that consists of multiple sets of tab pages controlled by toggle buttons. Here is an example of the functional c ...

htmlcsstwitter-bootstraptabsupgrade

If the progress bar in AngularJS reaches 100%, the "active" class will be automatically removed

How can I remove the bootstrap 'active' class from the progress bar once it reaches 100% to stop the stripes from moving? I tried this, but it's not working: <div class="progress progress-striped active" style="margin-bottom: 0;" n ...

angularjstwitter-bootstrapprogress-bar

Upgrading to SVG icons from font icons - Eliminate inline formatting

After making the decision to transition from font icons to SVG icons, I used Adobe Illustrator to create my SVGs and exported each individual icon using the following settings: Styling: Inline Style Font: SVG Images: Embed Object IDs: Layer Names Decimal ...

csssvgnpmicons

Troubleshooting: Owl Carousel Issue in Laravel 5.8 with Bootstrap

After struggling to set up the owl carousel for some time now, none of the solutions I found seemed to do the trick. I started to question whether it was even possible or if there was a crucial step I was missing. Despite trying numerous solutions, I coul ...

laravelbootstrap-4owl-carousel

Differentiating CSS translate in front versus behind another div

I'm having some trouble translating an SVG graphic in the y-axis using CSS transforms. The translation itself is working fine: transform: translate3d(0, -100px, 0); However, when I move the graphic 100px up in the Y direction, it ends up behind its ...

htmlcsssvgtransform

Issues with the styling of DIV elements

Currently tackling a project that involves numerous DIVs and sections, encountering an issue with the header. When I attempt to minimize the browser window, the search bar and panes div are not staying within the "header" section as expected. The structur ...

csshtmlheaderposition

Swapping values between HTML tables and arrays with the power of JavaScript

I have a unique table structure that I need help with: https://i.sstatic.net/fr7oJ.png My current table has 2 rows and multiple columns, but I want to change it to have 2 columns and multiple rows like this: https://i.sstatic.net/uhkp9.png To create th ...

javascripthtmlcsshtml-tabletranspose

Move the width from left to right with animation

Currently, I am exploring ways to use jQuery to create an animation effect on a div where the width shrinks from left to right. My first step is to have the element animate as follows: Slide in from left to right Then continue moving to the right off th ...

jquerycss

Issues with aligning text in TextBoxes

I'm struggling to center align my text boxes and write labels on either side. I want it to look like this: https://i.stack.imgur.com/6QsNv.png Despite trying different solutions, I can't seem to get the boxes to align in the center. Is there a ...

csshtmltextboxalignment

Discovering the root cause of why a particular CSS style is not being implemented correctly

Currently, I am in the process of developing a secondary theme for one of my websites. It's going to be a dark theme. I'm facing an issue where a specific CSS style is not being applied to a particular element, even though it works perfectly fine ...

javascripthtmlcss

Grid element not displaying properly as intended

I'm having trouble centering the content of item in the middle column, it just won't budge. .home-grid-container { display: grid; grid-template-columns: auto; grid-template-rows: 0.10fr 0.98fr auto; height: 100vh; } .home-header { g ...

htmlcsscss-grid

What causes an image's size to change when it floats within the parent container?

There seems to be a height mismatch issue between the container and the image inside it when the parent is floated, but not the child. However, when both are given the float property, the height matches perfectly. Why is this? <div class="parent">&l ...

htmlcss

Video player on website experiencing issues with playing VAST ads

Hey there! Check out this awesome site for Music Videos: (Music Videos(Player)) I've been testing different options, but if you have a better suggestion, please let me know. Any help would be really appreciated. If I can't figure it out on my o ...

javascripthtmlcss

Keep fancybox items in their designated spot

When the window is opened at full size, everything looks fine. However, when you resize the window horizontally, the thumbnails shift and disappear. I want them to remain fixed in their position like the large pop-up image so that users can still see them ...

javascriptjqueryhtmlcssfancybox

Alter the color of the text within the `<li>` element when it is clicked on

Here is a list of variables and functions: <ul id="list"> <li id="g_commondata" value="g_commondata.html"> <a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value'))">Variable : ...

javascripthtmlcss