1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

bootstrap navbar not showing on mobile devices

Discussion in 'CSS' started by aretai, Oct 5, 2017.

  1. #2
    Hello,

    I've developed a simple website with a bootstrap navbar, which is collapsible on mobile devices. I tried everything, but as of now the navbar toggle icon doesn't show up on mobile devices. You can still click the rectangle in top right corner and then the collapsible menu shows up, but I think that most of the users may not know of that. My website is here - http:// sylviadieta.pl/
    SEMrush
    html:

        <nav class="navbar navbar-expand-lg navbar-default navbar-default-edit fixed-top">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">
              <img src="img/logo2.png" width="136" height="60" alt="logo">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
              <ul class="navbar-nav ml-auto">
                <!--
                <li class="nav-item active">
                  <a class="nav-link" href="#"><b>Strona Główna</b>
                    <span class="sr-only">(current)</span>
                  </a>
                </li>
                -->
                <li class="nav-item">
                  <a class="nav-link" href="#stronaglowna"><b>Strona Główna</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#omnie"><b>O Mnie</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#cennik"><b>Cennik</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#wizyta"><b>Wizyta</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#certyfikaty"><b>Certyfikaty</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#edieta"><b>E-dieta</b></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#kontakt"><b>Kontakt</b></a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
    Code (markup):
    CSS:

    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900);
    
    .navbar {
      background-color: #0ac530;
    }
    .navbar .navbar-brand {
        font-size: 1.5em;
      color: #000000;
    }
    .navbar .navbar-brand:hover,
    .navbar .navbar-brand:focus {
        font-size: 1.5em;
      color: #000000;
    }
    .navbar .navbar-text {
        font-size: 1.5em;
      color: #000000;
    }
    .navbar .navbar-nav .nav-link {
        font-size: 1.5em;
      color: #000000;
      border-radius: .25rem;
      margin: 0 0.25em;
    }
    .navbar .navbar-nav .nav-link:not(.disabled):hover,
    .navbar .navbar-nav .nav-link:not(.disabled):focus {
      color: #000000;
    }
    .navbar .navbar-nav .nav-item.active .nav-link,
    .navbar .navbar-nav .nav-item.active .nav-link:hover,
    .navbar .navbar-nav .nav-item.active .nav-link:focus,
    .navbar .navbar-nav .nav-item.show .nav-link,
    .navbar .navbar-nav .nav-item.show .nav-link:hover,
    .navbar .navbar-nav .nav-item.show .nav-link:focus {
      color: #000000;
      background-color: #11cc05;
    }
    .navbar .navbar-toggle {
      border-color: #11cc05;
    }
    .navbar .navbar-toggle:hover,
    .navbar .navbar-toggle:focus {
      background-color: #11cc05;
    }
    .navbar .navbar-toggle .navbar-toggler-icon {
      color: #000000;
    }
    .navbar .navbar-collapse,
    .navbar .navbar-form {
      border-color: #000000;
    }
    .navbar .navbar-link {
      color: #000000;
    }
    .navbar .navbar-link:hover {
      color: #000000;
    }
    
    [USER=124521]@media[/USER] (max-width: 575px) {
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
        color: #000000;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
        color: #000000;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #000000;
        background-color: #11cc05;
      }
    }
    
    [USER=124521]@media[/USER] (max-width: 767px) {
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
        color: #000000;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
        color: #000000;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #000000;
        background-color: #11cc05;
      }
    }
    
    @media (max-width: 991px) {
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
        color: #000000;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
        color: #000000;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #000000;
        background-color: #11cc05;
      }
    }
    
    [USER=124521]@media[/USER] (max-width: 1199px) {
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
        color: #000000;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
        color: #000000;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #000000;
        background-color: #11cc05;
      }
    }
    
    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #000000;
    }
    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #000000;
    }
    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #000000;
      background-color: #11cc05;
    Code (markup):
    Thank you
     
    aretai, Oct 5, 2017 IP
    SEMrush
  2. Blesta.Store

    Blesta.Store Active Member

    Messages:
    97
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    80
    #3
    Looking at your code you are missing:
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
    HTML:
    Inside:
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
    Code (markup):
     
    Blesta.Store, Oct 5, 2017 IP
  3. aretai

    aretai Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    So it should be something like:

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
    HTML:
    I tried that and it is not working.
     
    aretai, Oct 5, 2017 IP
  4. Blesta.Store

    Blesta.Store Active Member

    Messages:
    97
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    80
    #5
    Sorry looks like you are using Bootstrap 4.0 not 3.x

    Try this if this works then just change it to fit your needs.
    <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">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
    Code (markup):
     
    Blesta.Store, Oct 5, 2017 IP
    cronik likes this.
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,666
    Likes Received:
    1,563
    Best Answers:
    226
    Trophy Points:
    515
    #6
    Ah, such a lovely example of what incompetent nonsense bootcrap is. Really the whole menu is what with the scripting doing CSS' job, endless pointless classes for nothing, etc, etc, etc....

    Nothing like 2.3k of markup to do half a K's job. Sure that made developing the page so much "easier". Hell the selectors ALONE just to apply custom colours is bigger than the CSS needed to write the menu without bootcrap!

    Go find a stick to scrape that off with.
     
    Last edited: Oct 9, 2017
    deathshadow, Oct 9, 2017 IP