Farklı boyutlu ekranda NAVBAR

) kodu ile oluşturulmuş. Ekran boyutunu küçültünce menüdekiler alt alta sıralanıyor çirkin bir görüntü oluşuyor. Ekran boyutu 768 pikselden küçük olduğunda collapse (Türkçe'de başka bir adı var mı bilmiyorum:)))) olmasını istiyorum. Nasıl yapabilirim?

        <ul class="nav nav-justified buyuk-goster kucuk-gizle"> 
            <li class="active"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=index.html" data-href="index.html">Anasayfa</a></li> 
            <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=hakkimizda.html" data-href="hakkimizda.html">Hakkımızda</a></li> 
            <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=komisyonlar.html" data-href="komisyonlar.html">Komisyonlar</a></li> 
            <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=galeri.html" data-href="galeri.html">FotoGaleri</a></li> 
            <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=videolar.html" data-href="videolar.html">Videolar</a></li> 
            <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=iletisim.html" data-href="iletisim.html">İletişim</a></li> 
          </ul> 
   
  	<nav role="navigation" class="navbar navbar-custom buyuk-gizle kucuk-goster"> 
      <div class="container-fluid"> 
          <!-- Brand and toggle get grouped for better mobile display --> 
          <div class="navbar-header"> 
              <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
                  <span class="sr-only">Toggle navigation</span> 
                  <span class="icon-bar"></span> 
                  <span class="icon-bar"></span> 
                  <span class="icon-bar"></span> 
              </button> 
              <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=#" class="navbar-brand" data-href="#" class="navbar-brand">Başlık</a> 
          </div> 
          <!-- Collection of nav links and other content for toggling --> 
          <div id="navbarCollapse" class="collapse navbar-collapse"> 
              <ul class="nav navbar-nav"> 
                  <li class="active"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=index.html" data-href="index.html">Anasayfa</a></li> 
                  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=hakkimizda.html" data-href="hakkimizda.html">Hakkımızda</a></li> 
  		<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=komisyonlar.html" data-href="komisyonlar.html">Komisyonlar</a></li> 
  		<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=galeri.html" data-href="galeri.html">FotoGaleri</a></li> 
                  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=videolar.html" data-href="videolar.html">Videolar</a></li> 
  	        <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107341556&url=iletisim.html" data-href="iletisim.html">İletişim</a></li> 
              </ul> 
          </div> 
      </div> 
  	</nav> 
  

 
    .kucuk-goster{ 
    display:block; 
  } 
   
    .kucuk-gizle{ 
    display:none; 
  } 
   
  @media (min-width: 768px) { 
    .buyuk-goster{ 
    display:block; 
    } 
   .buyuk-gizle{ 
    display:none; 
    } 
  }