Issues with Bootstrap's navbar-toggleable-sm functionality not functioning properly

Just started learning Bootstrap and following a tutorial on Lynda.com about customizing the navbar. However, despite following the tutorial step by step, my navbar is not behaving as expected - it's stacking vertically on all device sizes instead of just md and under. I'm having trouble figuring out what went wrong.

You can view the page here

Here is the specific code snippet:

<div class="navmenu">

        <nav class="navbar navbar-toggleable-sm">

            <div class="navbar-nav">

                <a class="nav-item nav-link" href="#">One</a>
                <a class="nav-item nav-link" href="#">Two</a>
                <a class="nav-item nav-link" href="#">Three</a>
                <a class="nav-item nav-link" href="#">Four</a>
                <a class="nav-item nav-link" href="#">Five</a>
                <a class="nav-item nav-link" href="#">Six</a>

            </div><!--navbar-nav-->    

        </nav><!--nav-->    

    </div><!--navmenu-->

Any assistance would be greatly appreciated! Thank you

htmlcsstwitter-bootstrapbootstrap-4nav

Answer №1

The latest version of Bootstrap 4 has introduced changes to several CSS classes, including navbar-toggleable-sm:

.badge-default is now .badge-dark
.bg-faded is now .bg-light
.bg-inverse is now .bg-dark
.card-block is now .card-body
.card-outline-primary is now .border-primary
.card-outline-secondary is now .border-secondary
.card-outline-success is now .border-success
.card-outline-info is now .border-info
.card-outline-warning is now .border-warning
.card-primary is now .bg-primary
.card-success is now .bg-success
.card-info is now .bg-info
.card-warning is now .bg-warning
.card-danger is now .bg-danger
.hidden-xs-down is now .d-none .d-sm-block
.hidden-sm-down is now .d-none .d-md-block
.hidden-md-down is now .d-none .d-lg-block
.hidden-lg-down is now .d-none .d-xl-block
.hidden-xs-up is now .d-none
.hidden-sm-up is now .d-sm-none
.hidden-md-up is now .d-md-none
.hidden-lg-up is now .d-lg-none
.hidden-xl-up is now .d-xl-none
.navbar-toggleable-sm is now .navbar-expand-sm
.navbar-toggleable-md is now .navbar-expand-md
.navbar-toggleable-lg is now .navbar-expand-lg
.navbar-toggleable-xl is now .navbar-expand-xl

Answer №2

Learn how to implement in Bootstrap version 4.0.0-beta.2

<nav class="nav flex-column flex-sm-row">
  <a class="nav-link" href="#">First</a>
  <a class="nav-link" href="#">Second</a>
  <a class="nav-link" href="#">Third</a>
  <a class="nav-link" href="#">Fourth</a>
  <a class="nav-link" href="#">Fifth</a>
  <a class="nav-link" href="#">Sixth</a>
</nav>

This layout will display a menu column on md screens and above, and a row on sm devices

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

Improving Consistency: Achieving a Uniform a:hover Effect for Links Listed in Lists

One issue I'm having is with creating a list of links and styling them with a:hover. The problem arises when the list has a defined width wider than the links themselves, causing the LIs to change color before the As on hover. It creates a messy appea ...

htmlcsshoverhtml-listsbullet

Implement a dialog on top of a current web page, achieve php-ajax query result, and enhance with

My website features 'dynamic' content, where 'static' nav-buttons replace specific div contents upon clicking. While I am able to retrieve my php/ajax results in a dialog box, I am struggling with placing this dialog above my current p ...

javascriptphphtmlajaxjquery-mobile

Spinning Circle with css hover effect

I have recently developed a simple website: Within this website, there is an interesting feature where a circle rotates above an image on hover. However, despite my best efforts, I couldn't make it work as intended. Here's the code snippet I use ...

htmlcss

What is the best way to extract information from a dynamically generated input field using vanilla JavaScript?

Creating a dynamic input field inside the 'education-field' div is the main goal here. The user can add more fields by clicking the "Add more" button, and the data from these input fields is crucial for form validation purposes. Users can input t ...

javascripthtmlvalidationbootstrap-5

Here is a unique version: "Guidelines for changing the default text " - " inside a button class='btn'> " - "< once the element is hovered over:after"

When hovering, the output always displays as "1IPSUM". However, adding a ':before' element with 'content:"1"' results in the output before hover being "11" The desired output is: while hovering, display "IPSUM" Fiddle Link: https://j ...

htmlcss

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: https://i.sstatic.net/fNhaP.png However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, a ...

javascriptcsssizescreen

Steps for placing a second pie chart alongside the initial one within a Bootstrap card

Is it possible to have two pie charts with different values using chart.js? I attempted to duplicate the script for the first chart to create a second one, but it did not display correctly. Why is the second pie chart not showing up? $(document).ready(fu ...

javascriptbootstrap-4chart.js

Implement a popmenu for navigation when the menu is too lengthy

Is there a way to create a dynamic breadcrumbs navigation that adjusts based on the page width, and displays certain elements in a dropdown menu if the navigation becomes too lengthy? For example, consider the following list: <div> <nav> ...

htmlcssbootstrap-4angular-ui-bootstrap

I'm looking for a solution to resolve a parseerror for AJAX Error code 200

function processOrderDetails(id, details){ $.ajax({ url : 'processOrderDetails.do', type : 'post', cache: false, data : { "id" : id, "details" : details }, ...

jqueryhtmljsonajaxjsp

Try utilizing MutationObserver to monitor changes in various nodes

I am faced with a situation where I have elements in my HTML that are dynamically populated with text from an API. My goal is to check if all these elements have a value and then trigger a function accordingly. The current code I have only allows me to obs ...

javascripthtmlmutation-observersmutation

What is the sequence in which the browser handles CSS?

I have a specific class that is being styled in multiple places on my website. I am curious about the order in which the browser reads and applies these different styles. Can you explain this process to me? Inline Style <div class="yellowtag" sty ...

css

Angular and Bootstrap work hand in hand to provide a seamless user experience, especially

I have been exploring ways to easily close the modal that appears after clicking on an image. My setup involves using bootstrap in conjunction with Angular. <img id="1" data-toggle="modal" data-target="#myModal" src='assets/barrel.jpg' alt=&a ...

htmlangulartypescriptbootstrap-4

Tips for utilizing a variable within a variable containing HTML code

Is it possible to incorporate variables in a JavaScript function that includes HTML code? Let's consider the following example: function SetCFonts() { var Color = $('#CColor').val(); var Font = $('#CFont').val(); var S ...

javascripthtmlcssvariables

Unable to retrieve list using Selenium in C# due to issues with FindElements method

Currently, I am working with C# and NUnit. I have encountered an issue where I need to extract the value from a span element and store it in an ArrayList. This is the code I am using to retrieve the price list: var productprice = driver.FindElements(By. ...

c#htmlcssvisual-studioselenium

Properly nested anchor elements with semantic meaning

I'm currently working on a web application where we are implementing inline editing. To illustrate the issue I'm trying to address, let's use the example of a Facebook post. For instance: Jennifer Lopez shared a new video The name "Jennif ...

htmlanchor

Enhance Bootstrap: adjust button width based on fluid text width

Incorporating Bootstrap 5 framework, I have designed a card that showcases brand information along with a navigation button on the right side. https://i.sstatic.net/25QVr.png When the description is brief, the button aligns perfectly in a single line. Ho ...

csstwitter-bootstrapflexboxbootstrap-5

Row in Internet Explorer 7

I have a function that reveals hidden rows in a table, which works perfectly in all tested browsers except for IE7. The function is written using Prototype.js. function showInactives(){ var row_list = $$('tr.inactive'); var ck =$('inactive_ ...

javascriptcssinternet-explorer-7

"Exploring the world of JavaFX: Unveiling the mysteries

Here are some CSS queries: How can I create a semi-transparent color using a color variable in CSS? * { -my-color: #123456; } .label { -fx-text-fill: ??? } What should be inserted in "???" to achieve a 50% opacity version of -my-color? Is it be ...

cssjavafx

Python and Selenium are a powerful combination, but sometimes you may encounter the error message "Element cannot be clicked at point (x,y)

I'm trying to automate the selection of a checkbox on a webpage using Selenium and Python with this line of code: self.driver.find_element_by_id('lg_1166').click() Unfortunately, I'm encountering an error message: Message: Element < ...

htmlpython-3.xseleniumfirefoxselenium-firefoxdriver

How to delete URL parameters in JavaScript and HTML5

I have a URL that looks like this: /users/?i=0&p=90 How can I remove the part from ? to 90 Can anyone provide me with some JavaScript code to achieve this? EDIT I mean doing this with window.location.href directly in the browser URL bar. I trie ...

javascripthtmlurlurl-parameters