Tips for concealing and substituting the navbar-toggler-icon in Bootstrap 4

Is there a way to hide and replace the navbar-toggler-icon in Bootstrap 4? Currently, the code I have just displays an 'X' below the hamburger menu.

<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
  data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" 
  aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">

     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
  data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" 
  aria-label="Toggle navigation">
    <span>X</span>
  </button>
</nav>
csshtmlbootstrap-4twitter-bootstrap-4

Answer №1

Your current code includes 2 toggles, but it seems unnecessary. Simply replace the standard navbar-toggler-icon with an X.

<nav class="navbar navbar-faded navbar-toggleable-md">
    <button class="navbar-toggler navbar-toggler-right py-2" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
       <span>X</span>
    </button>
    <a href="" class="navbar-brand">Brand</a>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav">
            <li><a href="">Link</a></li>
        </ul>
    </div>
</nav>

NOTE: To switch between the hamburger toggle icon and a close X, both icons need to be inside the navbar-toggler. Use some CSS to manage the collapsed state of the navbar.

.navbar-toggler>.close {
    display:inline;
}
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
    display:none;
}

http://www.codeply.com/go/fgHv33Q6UM

Bootstrap Update to Version 4.2

The original query/answer pertains to Bootstrap 4 alpha. When Bootstrap 4 transitioned to beta, the navbar-toggleable-* classes were altered to navbar-expand-*, affecting the navbar breakpoint. Here's an updated example for Bootstrap 4.2...

https://www.codeply.com/go/9AQ4AsYUph

Answer №2

If you're experiencing issues with the close button appearing at the beginning, give this solution a try

HTML

<nav class="navbar navbar-light bg-faded navbar-toggleable-md">
    <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
       <span class="my-1 mx-2 close">X</span>
       <span class="navbar-toggler-icon"></span>
    </button>
    <a href="" class="navbar-brand">Brand</a>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav">
            <li class="nav-item"><a href="" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="" class="nav-link">Link</a></li>
        </ul>
    </div>
</nav>

CSS

.navbar{
  button[aria-expanded="true"] > span.close {
    display: inline;
    color: #fff;
    opacity: 1;
  }

  button[aria-expanded="true"] > span.navbar-toggler-icon {
    display: none;
  }

  button[aria-expanded="false"] > span.close {
    display: none;
  }
}

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

The text value is not displayed in the Modal Box

I am trying to create modal boxes for editing forms. The modal box opens, but my text values are not displaying correctly - only the integer values show up (except for the first value). What could be the issue with my code? //--Snippet of the Code--// < ...

javascriptphphtml

Apply a unique font to the gridview that is not universally available on all systems

Can I use a custom font for my gridview that is accessible to all users, even if it doesn't exist in all systems? Is there a way to include the font in the project folder so that it can be viewed by everyone? ...

c#asp.netcss

Determining the minimum height of CSS based on an image

Currently, my goal is to dynamically set the minimum height of my CSS tabled content based on the height of the image rather than the text. In simple terms, my layout structure looks like this: <Image @60% width> | <Text @40% width> I am uti ...

htmlcssflexbox

Ensure that text and images are perfectly aligned along a single vertical line

I have the following code snippet using Bootstrap 4:- <div class="container"> <div class="row "> <div class="col-xl-12"> <img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-none d-sm-bl ...

csstwitter-bootstrapbootstrap-4responsive-design

Check out the element using the browser's developer tools

There is a helpful feature in Google Chrome that allows you to take an element object from the console and easily jump to the corresponding element in the element inspector, potentially shown as a jQuery result set. This feature serves as the opposite of ...

javascriptjqueryhtmlgoogle-chrome-devtools

Creating a customizable Sass Mixin for animation keyframes that incorporates various stages and the transform property

My goal is to generate the standard CSS using a SASS Mixin for efficiency. STANDARD CSS @-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg);} } @-moz-keyframes crank-up { 100% { -moz-transform: rotate(360deg);} } @-o-keyframes cran ...

csssassmixinscss-animations

Using NodeJS to fetch external page data and return Javascript variable information

I need to retrieve the entire DOM of a specific page by sending a request, essentially crawling the website. The HTML directly includes a variable with some data, instead of it being in a separate script file. With my NodeJS backend, I am utilizing request ...

javascripthtmlnode.js

What is the best way to separate colored boxes vertically while using width and padding in CSS?

I'm new to WebDev, so please bear with me as I explain my issue. I've created colored squares on a website using CSS properties – 70% width, 0 height, and 70% padding. These squares form a box grid, each containing an h2 element styled as follo ...

htmlcss

Adjust the CSS within a <style> element using jQuery or javascript

What I aim to accomplish: I intend to dynamically add and modify rules within a <style> tag using JavaScript/jQuery. Reason behind this goal: I am in the process of creating a color scheme editor where changes made by the user should be reflected ...

javascriptjqueryhtmlcss

Tips for capturing an iframe image underneath an HTML5 canvas

I'm attempting to display a webpage on my canvas so that I can make drawings or add notes to it. My goal is to capture a screenshot where the drawing is saved along with the webpage as the background. I tried embedding a URL in an iframe behind the c ...

javascripthtmliframecanvas

Is it possible to change the activation of a link from a double click to just a single click in Angular 5?

I am currently working on an Angular 5 app and have created a navigation component that displays different tabs/links. When a link is active (being viewed), the tab is highlighted with a border to resemble the front of a file folder. However, I am facing ...

htmlangular

How can I format the initial letter in the primary link within the initial list using CSS?

It's no surprise that the CSS isn't cooperating, but I'm hoping you can grasp the concept. There are two lists and my aim is to style the first letter of the first a in the initial ul. In this instance, it would be the B in Beauty Salons. Is ...

csspseudo-element

Creating a Dropdown Menu: Connecting Multiple Buttons to a JavaScript Function

I am currently working on creating a dropdown menu. I have already written the HTML and Javascript for two buttons, but I'm not sure how to connect the second button to the Javascript function. Do I need to write another function()? <div class="dr ...

javascripthtmlcss

Is it possible to select a checkbox using BeautifulSoup or Selenium?

Currently, I am getting familiar with Selenium and BeautifulSoup, but I'm facing a challenge with the following scenario: I have a collection of product codes: ['1242737-011', '4232345-015', '5673845-013'] My goal is t ...

pythonhtmlseleniumbeautifulsoupselenium-chromedriver

How can we pass on the width from an image to its parent or grandparent element using CSS?

Creating a cohesive image gallery with captioned images of different aspect ratios is my goal. To maintain consistency, I desire the browser to display each image at the same height while preserving its original aspect ratio by adjusting the width accordin ...

htmlcssimageaspect-ratio

Scrolling the Html5 canvas smoothly without the need for constant re-rendering

Is it feasible to achieve smooth panning on an HTML5 canvas without the need for rerendering? Are there any examples of code that demonstrate this functionality? Furthermore, is it also possible to apply the same technique for zooming? I am experiencing ...

htmlcanvaspanning

Error encountered while attempting to load image through multiple window.print() functions

I am having an issue with printing a receipt containing an image in a for loop when using the code below. The image does not load when multiple prints are done using the for loop (It works fine for a single print), but if I remove the image reference, it ...

javascripthtmldom

Utilizing the Parent Global Variable within an iFrame's URL

I currently have the following code hosted on my domain at thedomain.com/myapp/index.php <?php ini_set('display_errors',1); error_reporting(E_ERROR); $storeId = 123; ?> <!DOCTYPE html> <html class="no-js" lang="en"> <head ...

javascriptphpjqueryhtml

In order to activate the VScode Tailwind CSS Intellisense plugin, I have discovered that I need to insert a space before

I recently followed the installation guide for using Tailwind with Next.js Here is a snippet from my tailwind.config.js file: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", ...

cssreactjsvisual-studio-codenext.jstailwind-css

How can I filter a list using a checkbox form with PHP and SQL?

My task involves filtering the search results of a form on another page, based on the jobtype variable in a MySQL table using checkboxes and a sorting form. Even though the table contains multiple submissions with jobtype variables, selecting those option ...

phpmysqlhtmlformscheckbox