What's the best way to position the <li> element beneath the hamburger icon?

Is there a way to place the list element 'Home' below the hamburger icon and logo in Bootstrap 4 in mobile mode? I attempted to display the logo as style="display: block" with no success.

<div class="container">
  <nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler hidden-sm-up float-xs-left" type="button" 
    data-toggle="collapse" data-target="#navbar-header"     
    aria-controls="navbar-header" 
    aria-expanded="false" aria-label="Toggle navigation"></button>
    <a class="navbar-brand hidden-md-up" href="/">Logo</a>
    <div class="collapse navbar-toggleable-xs" id="navbar-header">
      <ul class="nav navbar-nav">
        <a class="navbar-brand hidden-sm-down" href="/">Logo</a>
        <li class="nav-item {% block navhome %}{% endblock %}">
          <a class="nav-link float-left" href="/">Home <span 
           class="sr-only">(current)</span></a>
        </li>
twitter-bootstrapcssbootstrap-4twitter-bootstrap-4

Answer №1

If you are looking to have the content stack vertically (like it did in version 3.x), you will need to include some extra CSS for Bootstrap 4.

@media(max-width:576px) {
    .navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    .navbar .navbar-nav {
        float:none !important;
    }
    .navbar .collapse.in, .navbar .collapsing  {
        clear:both;
    }
}

Check out this link for more information.

For a detailed explanation, refer to this helpful answer.

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

Customizing the Dropdown Arrow Icon to a Desired Icon of Choice

I'm looking to customize the dropdown select on my website by changing the arrow icon to a plus icon, which will then turn into a minus icon when clicked and the choices are displayed. I'm new to jquery and eager to learn more about this language ...

jqueryhtmlcss

Selection tool for Material UI Fields

Is there a way to design something similar to this layout using Material UI? I'm looking to create a selection between fields. Any advice on how to achieve this in Material UI? ...

cssreactjsmaterial-ui

The vertical-align property in CSS seems to be malfunctioning

Hi there, I'm struggling with the CSS code below: .parent { position : 'absolute'; top : '50px'; left : '50px'; width : '400px'; height : '160px'; padding : '10px'; ...

htmlcsstext-align

take a paragraph element outside of a container div

In my ASP project, I have incorporated JavaScript and CSS code that I obtained from JonDesign's SmoothGallery demo website. Now, I am trying to move the p tag containing the summary out of the div. Here is the current code snippet: <div id="myGall ...

asp.netcss

Tips for avoiding the display of the overall scrollbar while utilizing grid with an overflow:

In my react-redux application, I am utilizing the material ui Grid component for layout design. The structure of my code is as follows: <div> <Grid container direction="row" spacing={1}> <Grid item xs={3}> ...

javascriptcssreactjslayoutmaterial-ui

A group of iframes are cropping at the bottom

Currently, I am encountering a problem with using iframes to manage the navigation aspects on my website. Despite setting the iframe to have "overflow: visible;", it still crops the bottom of my content. The strange thing is, both iframes on the same page ...

htmlcssiframe

Changing the color of the timePicker clock in material-ui: a step-by-step guide

I have been attempting to update the color of the time clock in my timeInput component (material-ui-time-picker) for material-ui, but unfortunately, it is not reflecting the change. Here is the code I am using: <TimeInput style ={heure} ...

javascriptcssreactjsmaterial-ui

Angular is unable to eliminate the focus outline from a custom checkbox created with Boostrap

Have you noticed that Angular doesn't blur out the clicked element for some strange reason? Well, I came up with a little 'fix' for it: *:focus { outline: none !important; } It's not a perfect solution because ideally every element sh ...

javascriptjqueryhtmlcssangularjs

The MySQL query is returning a blank result with only the column headings displaying

I have been working on improving my skills in PHP and AJAX by developing an application that enables users to search a database for real-time product stock information. Currently, I am facing an issue where the headings are displayed when a user types a le ...

phphtmlcssmysqlajax

Use jQuery to insert the TEXT heading as an input value

Can anyone help me with copying text from a heading to an input value? Here's an example: <h2 class="customTitleHead">This is a Heading</h2> I want to transfer the text from the heading into an input field like this: <input type="tex ...

javascriptjquerycsshtml

What causes the content of a sticky navbar to overflow?

I have a situation where my navbar has two styles (.navbar and .navbar_fixed), but the links in the navbar are not fitting properly. I attempted to remove padding and add left: 0;, however, these adjustments did not work as expected. Any suggestions on how ...

htmljquerycss

Encountering issues with implementing bootstrap-datepicker on cloned rows, as the values remain locked to the first date field

Encountered an issue with cloning rows using bootstrap-datepicker and bootstrap. To reproduce the problem: 1. Select a date in the first input field (id_form-0-expense_date_item). 2. Add another row and select a date in the second input field, which shoul ...

jquerytwitter-bootstrapbootstrap-datepicker

When using the <a> tag in an ASP.NET MVC view, the hyperlink may be missing

When utilizing ASP.NET MVC 5, I encountered an issue within my view where I am attempting to incorporate "Edit | Delete" functionality within a table. Strangely, I am able to generate a hyperlink for the Edit function, but not for the Delete function. Wit ...

htmljquerycssasp.net-mvc-5

Can the typical drag and drop cursors be ignored in an HTML drag operation?

I've been working with the HTML drag and drop API to allow users to resize columns in a table. However, I've noticed that when a user starts dragging a column, the cursor changes to one of the default drag and drop effects (such as move or none). ...

javascriptcsshtmldrag-and-drop

Utilizing jQuery's each() function to create a seamless loop of background images in a

Struggling with looping the background image in a slick slider? Check out the code snippet below. var json = [ { "img_url": "https://via.placeholder.com/500x500?text=1" }, { "img_url": "https://via.placeholder.com/500x500?text=2" }, { "img_url": "ht ...

javascriptjquerycss

Why won't my Twitter Bootstrap navigation bar apply the styles?

I am currently working on a Rails app (4.0) and have incorporated Bootstrap 3 into my project. Both bootstrap.css and bootstrap-theme.css are stored in the stylesheets directory, while bootstrap.js is located in the javascripts directory. Most of the Boots ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is it possible to alter CSS attributes dynamically without setting a limit on the number of changes that can be made?

In my current project, I am looking to add a feature that allows users to choose the color scheme of the software. While the choices are currently limited, I plan to implement a color picker in the future to expand the options available. So far, I have ex ...

htmlcssangular

Tips for keeping Sub Menu visible at all times

Is there a way to keep the sub menu always visible on the homepage of my website's navigation? Thank you for your help! Check out my website here ...

htmlcsswordpress

Responsive slide displays a unique number of items per slide depending

I created a logo slider using Bootstrap, similar to the one showcased here: http://jsfiddle.net/juddlyon/Q2TYv/10/. Currently, each slide in the slider displays 4 logos. I would like to make it responsive so that on smaller screens, only 2 logos are shown ...

phphtmlcss

Activating development mode for LessCSS in Node.js

I'm encountering some major difficulties identifying LESS parse errors within a large CSS compilation. The error messages aren't providing much help (at least not for me). Here are my questions: 1. Is there a method to activate more debugging ...

cssdebuggingnode.jsless