Permanent Visibility of Bootstrap 4 Navbar Toggler Icon

I am facing an issue with my navbar-toggler as it remains visible even on a large screen where it is not needed.

To view the file, click here.

    <div class="navbar-header">
        <a href="#" class="navbar-brand">Logo</a>
    </div>
    <button type="button" class="navbar-toggle bg-dark" data-toggle="collapse" data-target="#mainNavBar" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon visible-sm"></span>
    </button>
    <div class="container-fluid">
csshtmlbootstrap-4

Answer №1

Your navigation bar code is outdated and incomplete.

For Bootstrap 4, the navbar-expand-* class group is now responsible for controlling navbar expansion.

In this code snippet, the navbar-expand-lg class allows the navbar to expand from the large (lg) breakpoint and above, collapsing if the screen size is smaller than lg:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<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="#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="#">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>

Find more information at:

https://getbootstrap.com/docs/4.0/components/navbar/

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

Unusual spacing problem detected on iPad device

When I visit my demo site on my iPad, I'm having a strange issue where the player seems to be shifted to the top. This is how it looks on my iPad Mini running iOS 6.1 and tested on both Chrome and Safari: Here is the link to the demo site (change the ...

htmlioscssipadlayout

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

javascriptcsswebpacksass

What could be causing me to see a basic checkbox instead of a toggle switch in my React application?

I've been attempting to create a toggle switch that activates dark mode using Bootstrap switches, but when I save the code, it reverts back to a basic checkbox. According to the documentation, for older assistive technologies, these switch elements wi ...

javascripthtmlreactjsbootstrap-4frontend

The Bootstrap menu does not seem to be affecting the positioning of the body text

I recently came across an issue with a Bootstrap-based site I'm working on. When I click the hamburger menu on mobile view, the main content doesn't shift down to accommodate it, causing an overlap. Not ideal :-( Here's my Demo: https://js ...

jqueryhtmlcsstwitter-bootstrap

Ensure that a group of checkboxes is mandatory

I currently have a series of checkboxes set up like so: <label>What is your preferred movie genre?</label> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="genre1" name="genre" ...

javascripthtml

Unable to locate the CSS for the selected dropdown button in Bootstrap

Seeking help to locate the CSS code responsible for the blue border on a select dropdown button in Bootstrap. It seems simple, but I'm unable to find it. If anyone knows where this specific class is located in the CSS file, please share your insights ...

csstwitter-bootstrapbootstrap-selectbootstrap-selectpicker

Is there a way to eliminate the "x" in the upper right corner of a Foundation Joyride?

Edit 7/16/15: I decided to place the following code between the <li> tags within the joyride that required the removal of the "x" button: <script>$('.joyride-close-tip').remove();</script> While not the most elegant solution ...

csssasszurb-foundationzurb-joyride

Is jQuery Mobile Autocomplete's search feature activated after typing 3 letters?

Hello there, I am in the process of creating a website and have implemented an autocomplete field. However, I am facing an issue due to having over 1000 <li> elements within the <ul>, making it slow especially on mobile devices. I would like t ...

javascripthtmljquery-mobileautocomplete

CSS clearfix restricted to immediate parent div

Below is the code snippet that illustrates the objective I am attempting to achieve <div> <div style="float:left; width:220px; height:300px; border: 1px solid #aaa"> Left div <br>float:left <br> fixed width 220px </div> ...

htmlcss

<ul> hover effect and text </ul>

Looking for a solution to activate hover state on both the box and text when rolling over tiled images with text underneath. Check out this example in the Fiddle: http://jsfiddle.net/techydude/GF8tS/ Any suggestions on how I can achieve this effect? ...

cssrollover

Develop a dynamic button using JavaScript to fetch information from an array

I'm struggling with incorporating this button creation code into my HTML using JavaScript. The code for creating the button element in JS file looks like this: var numery = ['A','B','C']; var numer = document.createE ...

javascripthtmlcssappend

How can the end event of a custom CSS animation be bound using jQuery or JavaScript?

We are currently managing multiple animations on the same object and need to execute different actions once each animation is complete. At present, we listen for the webkitAnimationEnd event and use a complex if/then statement to handle each animation sep ...

javascriptjquerycsswebkitmobile-safari

What's the most effective method for implementing a stylesheet through Javascript in a style switcher?

I've been tackling the challenge of creating a style switcher for my website. Through utilizing .append() and if and else statements, I managed to make it work successfully. Take a look at the code below: HTML <select name="active_style" id="lol" ...

javascripthtmlcssperformance

issues with background image alignment in css

I attempted to add a sticky background to a div, which was successful. However, I am encountering an issue where the background does not stretch enough during scrolling. Below is the CSS code I used to apply the background, along with screenshots displayin ...

htmlcss

Unlocking the Interactive Potential of CSS Across All Screen Formats

I am currently working on transforming my website into an engaging and interactive platform. My first challenge: The alignment of the logo image does not meet my desired specifications. Whenever the screen width exceeds 1200 pixels, there seems to be exc ...

phphtmlcssinteractive

Unable to show additional columns beyond 6 while using Bootstrap's row-cols feature

Currently working on developing an auction website where I plan to showcase the listings as cards in columns. I have successfully managed to display a varying number of cards on different screen sizes, but I am facing an issue with showing more than 6 card ...

htmlgridbootstrap-5

What steps should I take to ensure that the login page functions properly?

Below is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Pag ...

javascriptphphtmlcssauthentication

What steps should I take to repair my jQuery button slider?

I am facing a challenge with creating a carousel of three images in HTML using jQuery. When the user clicks on the "Next" or "Previous" buttons, I want to scroll through the images one by one. However, I am struggling to hide the other images when one is d ...

javascriptjqueryhtmlcssslider

What is the best way to add a CSS rule to JavaScript?

animation: scaleUp 0.3s linear 0.4s forwards; animation: scaleDown 0.3s linear forwards; Greetings! I'm currently working on adding animations to my content filtering functionality. Specifically, I want to incorporate the aforementioned CSS rules in ...

javascriptcsssortinganimationfiltering

Highlight the active page or section dynamically using HTML and jQuery - How can it be achieved?

What am I trying to achieve? I am attempting to use jQuery to dynamically highlight the current page from the navigation bar. Am I new to jQuery/HTML? Yes, please excuse my lack of experience in this area. Have I exhausted all resources looking for a sol ...

javascripthtmljquerycss