Twitter Bootstrap Question posted in

Bootstrap: Navbar toggler icon not visible with mobile phone-Twitter bootstrap

I am working on my web application using Bootstrap v4. For the navigation I’m using the navbar toggler and everything is working fine on my desktop (Firefox). However, when I browse the same website with my mobile phone, on both Google Chrome and Firefox Focus the toggler icon is not visible. I do not know why is that.

Here my code snippet:

.navbar-toggler {
        color: rgba(0,0,0,.5);
        border-color: rgba(0,0,0,.1);
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm mb-3">
        <button class="navbar-toggler btn-block" 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 justify-content-end w-100">
                # the links
            </ul>
        </div>
    </nav>
Tags:

3

Answers


  1. 0

    Because of the .collapse class you’re using, .collapse class look like this: 

    .collapse {
    display: none;
    visibility: hidden;
}

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
    visibility: visible!important;
}
    Login or Signup to reply.
  2. 0

    Your Code is perfect, Please Add Sequence wise css and jquery like this 

    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    Login or Signup to reply.
  3. 0

    I had the same problem. Scripts loaded in correct order, two slightly different pages, one pure html, the other a dynamic django page. Button showed fine on the static page, but on the dynamic page, when changing to mobile size, the button showed as a blank square, instead of a square with lines. I tried many different things, script order, checked tags were correctly terminated, shook my magic dice while wearing a moose head. Then
    I changed my icon for the button from

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Working: Job List</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navmobile" 
                     aria-controls="navmobile" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    to

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Working: Job List</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navmobile" 
                     aria-controls="navmobile" aria-expanded="false" aria-label="Toggle navigation">
        <i title="" class="fa fa-bars"></i>
      </button>

    so just changing the icon to a fontawesome one for the button in the last line, and the button showed. Go figure….

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search