Farklı boyutlu ekranda NAVBAR

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Farklı boyutlu ekranda NAVBAR

Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı

1
Cevap 1033
Tıklama 0
Öne Çıkarma

1. sayfa

Farklı boyutlu ekranda NAVBAR

Cevap Yaz

lucius-132

10 yıl

Teğmen

Konu Sahibi

Merhaba. Hazır bir şablonu düzenleyerek oluşturduğumuz sitenin (bootstrap 3.3.5) navbar'ı (<ul class="nav nav-justified">) 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?

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil

Bir Daha Gösterme

lucius-132

10 yıl

Teğmen

Konu Sahibi

kendi çözümüm şöyle oldu ama tam çözülmedi. HTML'ye iki tane navbar ekledim. Biri justified diğeri collapse olacak şekilde.

        <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>

custom.css dosyasına da 4 tane class tanımladım.

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

şimdi tam istediğim gibi oldu ama collapse olunca sağda çıkan düğme çalışmıyor. Nasıl düzeltilir? Aynı navbar kodu başka sayfada tek başına olunca çalışıyor.

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Farklı boyutlu ekranda NAVBAR