Different ways to make the Bootstrap NavBar list item grow vertically rather than horizontally

I'm working on creating a fixed vertical Bootstrap NavBar on the left side of the screen for larger screens, which collapses into a NavBar button for smaller screens.

Placing the Bootstrap NavBar inside a column results in the list items expanding horizontally. How can I make them stack vertically on top of each other instead of side by side when expanding the page?

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

<div class="col-lg-2">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <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="#">Features</a>
            </li>
            <li class="nav-item"&...
htmlcssbootstrap-4

Answer №1

To create a responsive layout for the .navbar class, you can utilize CSS to change the flexbox direction to column and collapse the ul element. It's essential to incorporate @media queries to ensure this behavior is only applied on desktop screens with a minimum width of 1200px. Utilize Bootstrap limits for responsiveness to achieve this. Check out more information on Bootstrap limits here: https://getbootstrap.com/docs/4.1/layout/overview/

@media screen and (min-width:1200px) {
.navbar, .collapse ul {
  flex-direction:column!important;
}}

For an example implementation, you can refer to this CodePen link: https://codepen.io/larrytherabbit/pen/VwjwwoV

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

What is preventing me from utilizing global variables in distinct HTML and JavaScript files?

I am facing a perplexing issue with my HTML files, specifically index.html and lobby.html. Within main.js, which is loaded in index.html, I attempt to load lobby.html using window.location.href. Despite trying various methods to define global variables i ...

javascriptjqueryhtml

Struggling to align a column within a container in HTML CSS, issues with CSS not functioning as expected

I have been attempting to vertically center the column within a container, but it keeps aligning to the left. Despite trying numerous CSS properties, I can't seem to get it right. Shrinking the width of the paragraph container to 650px or 70% doesn&ap ...

htmlcss

Fix the order of the list items with HTML Agility Pack

I've been experimenting with the HTML Agility Pack to convert HTML into valid XHTML for inclusion in a larger XML document. While it mostly works, I've run into an issue with how lists are formatted: <ul> <li>item1 <li> ...

c#.nethtmlhtml-agility-pack

Populate div with straight lines running vertically or horizontally

I'm wondering how to create vertical or horizontal lines inside a div. I tried this in the past but lost the code, and searching for "fill div with lines" isn't giving me any relevant results. Here's an image to illustrate what I'm try ...

htmlcss

Learn how to toggle the visibility of three div elements arranged horizontally

$(document).ready(function () { $("#toggle").click(function () { if ($(this).data('name') == 'show') { $("#sidebar").animate({ width: '10%' }).hide() $("#map").an ...

javascriptjqueryhtmlcssangularjs

On my quest to maintain the stability of my navigation links on a compact screen, they mysteriously vanish once the screen shrinks to 900 pixels

I've been struggling to keep my navigation links visible. I attempted to use a dropdown button, but it didn't work properly. Even after installing popper js, the issue persisted. I decided to remove the button altogether as I prefer having the l ...

bootstrap-4

Ensure that the remaining space on the page is filled by utilizing 2 divs

I am currently in the process of developing a website that needs to be responsive on all pages. The layout consists of 5 divs positioned horizontally. The three middle divs have fixed sizes - 200px, 400px, and 200px respectively. However, I am facing a cha ...

csshtmlscreenfill

Having difficulties implementing horizontal scrolling for the Tabs component in Material UI

I can't seem to enable horizontal scrolling for the Tabs in material UI. Here is the version of Material UI I am using: As the number of Tabs increases, they are becoming wider. I tried to set the width, but it ends up affecting the entire Tabs tab ...

javascriptcssreactjsmaterial-ui

Is it possible to choose tags from a different webpage?

Imagine you have a page named a.html which contains all the jQuery code, and another page called b.html that only includes HTML tags. Is it feasible to achieve something like this: alert( $('a').fromhref('b.html').html() ); In essence ...

javascriptjqueryhtml

Issues with SVG Image Mask in Firefox and IE: How to Fix Them

Creating a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) has been easy for browsers like Chrome. However, I've been encountering significant difficulties in getting the mask to display properl ...

csssvgxhtml

Using Conditional Tags for CSS Display

I'm working on implementing Conditional Tags to toggle a CSS class on or off based on the current displayed page. However, I'm running into an issue where the code isn't executing properly. There might be a syntax or logic error causing the ...

phpcssif-statementconditional-statements

Introducing LightZAP v2.54 (silent update2), the revolutionary Lightbox custom plugin that seamlessly launches when the page loads using the designated tag name (#img1)

As I have the LightZAP plugin installed on my website as an alternative to Lightbox, I am looking to trigger it (to display an image gallery with a specific image) when the page loads using the following link: index.html#img1, if possible. I have come acr ...

javascripthtmllightbox

Struggling to make the text color change when hovering

On my website, I added a tab called newarrival at the top of the page. When you hover over this tab, I want the text to turn blue to indicate that it's a link. However, despite my efforts, it doesn't seem to be working as expected. You can see th ...

csscolorshover

Choosing Elements from Twin Dropdown Lists in PHP

I am currently working on building a dynamic drop-down menu where the options in the second dropdown depend on the selection made in the first one. The initial dropdown consists of a list of tables, and based on which table is chosen, the columns of that s ...

phphtmldrop-down-menu

Issue with Laravel Blade: HTML elements are not being displayed in my blade template file

After implementing WYSIWYG fields in my form, I noticed that the html tags are not being properly rendered upon retrieving the data. The HTML tags still appear in their raw form within the form itself. Attempting solutions found on this thread, I believed ...

phphtmllaravelwysiwyg

Tips for maintaining consistent image dimensions while resizing your browser window

I'm having trouble preventing an image from resizing when I adjust the browser size. If you click on this link and try resizing your browser, you'll see what I mean - the image stays the same. I've attempted various methods but haven't ...

htmlcss

Is it possible to activate the onChange event when the input value is being modified by the state with information obtained from a fetch

Currently, I am successfully fetching data from an API and storing it. However, I now want to incorporate a functionality where a user can paste a website URL into an input box, click a button, and then display the results in a return div UI. I am struggli ...

javascriptreactjsapibootstrap-4

What is the best way to ensure my output displays "Type" instead of "Types" when the show_count in WordPress is less than

Currently, I am utilizing wp_list_categories to generate a list and show_count is set to true to display the number of posts in each category. I have successfully implemented this code in my functions.php, removed the parentheses around the post counts, s ...

phphtmlcsswordpresswp-list-categories

displaying HTML on the web page only, without appearing in the text input field

update1: I have updated the image to provide better clarity https://i.sstatic.net/hYLsI.png I am currently working on implementing chip filters similar to Google Flights. When selecting "sports," it currently displays "sports1" and replaces "sports" with ...

javascripthtmlreactjsreduxmaterial-ui

Swapping the label of a tooltip in React using Bootstrap 4

When a user chooses a different language in my electron/react/bootstrap 4 app, I need to update the text (title) displayed in a bootstrap tooltip on a button. I have reviewed the bootstrap 4 Tooltip documentation but I am unable to find a way to modify the ...

reactjstooltipelectronbootstrap-4