Bootstrap 3 menu items disappear on small screen

Question

I have a nav-bar with navbar-brand on the right, menu elements in the middle and social links on the right. I've added navbar-collapse and collapse classes to the div containing those items.

However, After I resize screen below 768px every item except navbar-header disappears.

What am I missing?

HTML file:

<div class="container-fluid page">
  <div class="nav navbar navbar-default" role="navigation" style="z-index: 3">
    <div class="navbar-header">
      <a class="navbar-brand" routerLink="/home">
        NAME SURNAME
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <!-- Social links -->
      <ul id="middleMenu" class="nav navbar-nav navbar-center">
        <li>
          <a id="home" class="menu-link" routerLink="/home" routerLinkActive="active">
            <i class="fa fa-home fa-2x menu-image"></i>
            <i class="menu-text">HOME</i>
          </a>
        </li>
        <li>
          <a id="about" class="menu-link" routerLink="/about" routerLinkActive="active">
            <i class="fa fa-user-secret fa-2x menu-image"></i>
            <i class="menu-text">ABOUT</i>
          </a>
        </li>
        <li>
          <a id="skills" class="menu-link" routerLink="/skills" routerLinkActive="active">
            <i class="fa fa-code fa-2x menu-image"></i>
            <i class="menu-text">SKILLS</i>
          </a>
        </li>
        <li>
          <a id="work" class="menu-link" routerLink="/work" routerLinkActive="active">
            <i class="fa fa-cog fa-2x menu-image"></i>
            <i class="menu-text">MY WORK</i>
          </a>
        </li>
        <li>
          <a id="contact" class="menu-link" routerLink="/contact" routerLinkActive="active">
            <i class="fa fa-envelope fa-2x menu-image"></i>
            <i class="menu-text">CONTACT</i>
          </a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a class="fa fa-github fa-lg social-link" target="_blank" href="$">
          </a>
        </li>
        <li>
          <a class="fa fa-twitter fa-lg social-link" target="_blank" href="$">
          </a>
        </li>
        <li>
          <a class="fa fa-linkedin fa-lg social-link" target="_blank" href="$">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div id="particles-js"></div>
<!--   <router-outlet></router-outlet>
   --></div>
</body>

SCSS file:

$element-color: #08fdd8;
$fade_time: 0.5s;


.fa:hover {
  color: $element-color !important;
}


#middleMenu li {
  width: 70px;
  .menu-text {
    white-space: nowrap;
    text-align: center;
    display: none;
    color: $element-color !important;
  }
  .menu-image {
    //display: block;
    margin-left: 8px;
    margin-top: -5px;
    visibility: visible;
    opacity: 1;
    animation: fadein $fade_time;
  }
  &:hover {
    color: $element-color !important;
    .menu-image {
      display: none;
      visibility: hidden;
      opacity: 0;
      animation: fadeout $fade_time;
    }
    .menu-text {
      display: block;
      visibility: visible;
      opacity: 1;
      animation: fadein $fade_time;
    }
  }
}


//@media (min-width: $break-size) {
  .navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    display: inline-block;
    white-space: nowrap
  }
//}

.navbar-brand {
  color: #ffffff !important;
}

.navbar-brand:hover {
  color: $element-color !important;
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}


.fa, .navbar-brand {
  transition: color 0.2s ease;
}

Demo: https://jsfiddle.net/moph4wto/

"What am I missing?" - code in your question, for starters. jsFiddles are great, but your question must be answerable on it's own. I'd pull the code in from your fiddle. — Tieson T., Apr 24 '17 at 17:38

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

The problem is actually caused by the bootstrap media queries. See this post for more details Twitter bootstrap 3 how to activate navbar-collapse on small devices

edited May 23 '17 at 10:31

Community

1
1

answered Apr 24 '17 at 17:40

waterfoul

313
3
6

score 0 · Answer 2 · answered Apr 24 '17 at 17:45

0

navbar-header won't disappear on any screen size because when resize the screen below 786px it is the space where your toggle navigation button will appear if in any case you want to hide it you have to right media query yourself for it

answered Apr 24 '17 at 17:45

Akash

377
6
17

Bootstrap 3 menu items disappear on small screen

2 Answers2