CSS Nav Bar'ı responsive olarak ayarlama

emrezcan

emrezcan

Decapat
Katılım
15 Aralık 2022
Mesajlar
13
Daha fazla  
Cinsiyet
Erkek
Merhaba, nav barı responsive olarak ayarlamaya çalışıyorum ancak bar çizgileri aşağıda kaldı yukarı sağ tarafa çıkartmaya çalışıyorum. Nav bardaki programlar, hesaplayıcılar ve rehberler bölümünün de alt alta olmasını istiyorum. Nasıl yapabilirim? Aydınlatırsanız sevinirim.

Kod: 
HTML

    <nav>

        <div class="container clearfix">

            <div id="logo-box">

                <a href="/" class="logom">

                    EMRE GYM

                </a>

            </div>

            <div id="nav-linkleri">

                <ul class="demo-dropdown">

                    <li class="nav-item">

                        <a href="#" class="nav-link nav-icon">

                            <i class="fa-solid fa-bars" style="color: #000000;"></i>

                        </a>

                    </li>

                    <li class="nav-item">

                        <a href="#" class="nav-link">

                            Programlar

                        </a>

                        <ul>

                            <li><a href="#">Link</a></li>

                            <li><a href="#">Link</a></li>

                            <li><a href="#">Link</a></li>

                            <li><a href="#">Link</a></li>

                        </ul>

                    </li>

                    <li class="nav-item">

                        <a href="#" class="nav-link">

                            Hesaplayıcılar

                        </a>

                        <ul>

                            <li><a href="#">Link</a></li>

                            <li><a href="#">Link</a></li>

                            <li><a href="#">Link</a></li>

                            <li><a href="#">Link</a></li>

                        </ul>

                    </li>

                    <li class="nav-item">

                        <a href="#" class="nav-link">

                            Rehberler

                        </a>

                        <ul>

                            <li><a href="#">Link</a></li>

                            <li><a href="#">Link</a></li>

                            <li><a href="#">Link</a></li>

                            <li><a href="#">Link</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

        </div>

    </nav>



CSS



@media(max-width: 992px){

  #logo-box{

    float: none;

    text-align: left;

  }

  #nav-linkleri{

    float: none;

  }

  #nav-linkleri .nav-link{

    font-size: 2rem;

    padding-left: 0;

  }

 

  #nav-linkleri .nav-item{

    float: none;

    text-align: left;

  }

  #nav-linkleri .nav-icon{

    display: block;

    position: absolute;

  }

}
 
Son düzenleyen: Moderatör:
emrezcan dedi:
Merhaba, nav barı responsive olarak ayarlamaya çalışıyorum ancak bar çizgileri aşağıda kaldı yukarı sağ tarafa çıkartmaya çalışıyorum. Nav bardaki programlar, hesaplayıcılar ve rehberler bölümünün de alt alta olmasını istiyorum. Nasıl yapabilirim? Aydınlatırsanız sevinirim.

Kod: 
HTML

 <nav>

 <div class="container clearfix">

 <div id="logo-box">

 <a href="/" class="logom">

 EMRE GYM.

 </a>

 </div>

 <div id="nav-linkleri">

 <ul class="demo-dropdown">

 <li class="nav-item">

 <a href="#" class="nav-link nav-icon">

 <i class="fa-solid fa-bars" style="color: #000000;"></i>

 </a>

 </li>

 <li class="nav-item">

 <a href="#" class="nav-link">

 Programlar.

 </a>

 <ul>

 <li><a href="#">Link</a></li>

 <li><a href="#">Link</a></li>

 <li><a href="#">Link</a></li>

 <li><a href="#">Link</a></li>

 </ul>

 </li>

 <li class="nav-item">

 <a href="#" class="nav-link">

 Hesaplayıcılar.

 </a>

 <ul>

 <li><a href="#">Link</a></li>

 <li><a href="#">Link</a></li>

 <li><a href="#">Link</a></li>

 <li><a href="#">Link</a></li>

 </ul>

 </li>

 <li class="nav-item">

 <a href="#" class="nav-link">

 Rehberler.

 </a>

 <ul>

 <li><a href="#">Link</a></li>

 <li><a href="#">Link</a></li>

 <li><a href="#">Link</a></li>

 <li><a href="#">Link</a></li>

 </ul>

 </li>

 </ul>

 </div>

 </div>

 </nav>

CSS.

@media(max-width: 992px){

 #logo-box{

 float: none;

 text-align: left;

 }

 #nav-linkleri{

 float: none;

 }

 #nav-linkleri .nav-link{

 font-size: 2rem;

 padding-left: 0;

 }

 #nav-linkleri .nav-item{

 float: none;

 text-align: left;

 }

 #nav-linkleri .nav-icon{

 display: block;

 position: absolute;

 }

}
Genişletmek için tıkla...

Kodlar eksik gibi.
 
Sadece responsive belirteçlerini atmışsınız, ana stilleri atmamışsınız.
 

Dosya Ekleri

  • Screenshot 2023-12-22 135622.png
    Screenshot 2023-12-22 135622.png
    11,2 KB · Görüntüleme: 30
AngelEyess4 dedi:
Sadece responsive belirteçlerini atmışsınız, ana stilleri atmamışsınız.
Genişletmek için tıkla...
nav {
width: 100%;
position: fixed;
font-family: 'Poppins', sans-serif;
background-color: #F7F7F7;
color: #000000;
padding-top: 1.7rem;
padding-bottom: 1.7rem;
z-index: 500;
}
#logo-box {
float: left;
padding-top: 0.5rem;
}
#logo-box .logom {
color: #000000;
font-weight: 700;
font-size: 3.2rem;

}
#nav-linkleri {
float: right;
}
#nav-linkleri .nav-item {
float: left;
margin: 0.5rem;
}
#nav-linkleri .nav-link {
color: #000000;
font-size: 1.6rem;
font-weight: 700;
display: block;
padding: 1.6rem;
letter-spacing: 0.1rem;
transition: 0.4s;
}
#nav-linkleri .nav-link:hover {
color: #CE2E2D;
}



/* dropdown */

.demo-dropdown a {
font-family: 'Poppins', sans-serif;
text-decoration: none;
font-weight: 400;
font-size: 1.2rem;
display: block;
}
.demo-dropdown ul:hover {
transition: 3s;
}


.demo-dropdown>li {
position: relative;
/* içerisinde ul position:absolute değerine sahip olduğu için kapsayıcı li relative olmalı */
display: inline-block;
}
.demo-dropdown>li>a {
color: #000000;
background: #F7F7F7;
padding: 2.0rem 2.5rem;
}
.demo-dropdown>li ul {
position: absolute;
/* Açılır menü mouse üzerine gelerek açıldığında aşağıdaki öğeleri kaydırması istenmiyor. Bu yüzden absolute. */
display: none;
/* Açılır menü li:hover olmadığı sürece gizlencektir */
top: 100%;
/* Top 100% değeri parent li'ye göre hesaplanır ve li'nin bittiği noktayı göstermektedir. */
left: auto;
/* left:0 değeri li'nin sol başlangıç değerini referans alır ve ul'yi aynı hizda konumlandırı. */
width: 20.0rem;
background-color: #000000;
opacity: 1;
}
.demo-dropdown>li:hover ul li a {
transition: 0.4s;
}
.demo-dropdown>li ul li a {
color: #F7F7F7;
padding: 0.75rem 0.75rem;
opacity: 1;
}
.demo-dropdown>li ul li:hover a {
color: #CE2E2D;
transition: 0.4s
}
.demo-dropdown>li:hover ul {
display: block;
transition: 0.4s
}
#nav-linkleri .nav-icon{
display: none;
}

533388 dedi:
Kodlar eksik gibi.
Genişletmek için tıkla...
nav {
width: 100%;
position: fixed;
font-family: 'Poppins', sans-serif;
background-color: #F7F7F7;
color: #000000;
padding-top: 1.7rem;
padding-bottom: 1.7rem;
z-index: 500;
}
#logo-box {
float: left;
padding-top: 0.5rem;
}
#logo-box .logom {
color: #000000;
font-weight: 700;
font-size: 3.2rem;

}
#nav-linkleri {
float: right;
}
#nav-linkleri .nav-item {
float: left;
margin: 0.5rem;
}
#nav-linkleri .nav-link {
color: #000000;
font-size: 1.6rem;
font-weight: 700;
display: block;
padding: 1.6rem;
letter-spacing: 0.1rem;
transition: 0.4s;
}
#nav-linkleri .nav-link:hover {
color: #CE2E2D;
}



/* dropdown */

.demo-dropdown a {
font-family: 'Poppins', sans-serif;
text-decoration: none;
font-weight: 400;
font-size: 1.2rem;
display: block;
}
.demo-dropdown ul:hover {
transition: 3s;
}


.demo-dropdown>li {
position: relative;
/* içerisinde ul position:absolute değerine sahip olduğu için kapsayıcı li relative olmalı */
display: inline-block;
}
.demo-dropdown>li>a {
color: #000000;
background: #F7F7F7;
padding: 2.0rem 2.5rem;
}
.demo-dropdown>li ul {
position: absolute;
/* Açılır menü mouse üzerine gelerek açıldığında aşağıdaki öğeleri kaydırması istenmiyor. Bu yüzden absolute. */
display: none;
/* Açılır menü li:hover olmadığı sürece gizlencektir */
top: 100%;
/* Top 100% değeri parent li'ye göre hesaplanır ve li'nin bittiği noktayı göstermektedir. */
left: auto;
/* left:0 değeri li'nin sol başlangıç değerini referans alır ve ul'yi aynı hizda konumlandırı. */
width: 20.0rem;
background-color: #000000;
opacity: 1;
}
.demo-dropdown>li:hover ul li a {
transition: 0.4s;
}
.demo-dropdown>li ul li a {
color: #F7F7F7;
padding: 0.75rem 0.75rem;
opacity: 1;
}
.demo-dropdown>li ul li:hover a {
color: #CE2E2D;
transition: 0.4s
}
.demo-dropdown>li:hover ul {
display: block;
transition: 0.4s
}
#nav-linkleri .nav-icon{
display: none;
}
 
CSS: 
#nav-linkleri .nav-item {
float: left;
margin: 0.5rem;
display: flex;
    flex-direction: column;
}
#nav-linkleri .nav-link {
color: #000000;
font-size: 1.6rem;
font-weight: 700;
display: block;
padding: 1.6rem;
letter-spacing: 0.1rem;
transition: 0.4s;
margin-top: 200px;
}
 

Benzer konular

0
  • Soru
HTML ve CSS ile responsive konumlandırma hatası
Mesaj
3
Görüntüleme
578
AngelEyess4
AngelEyess4
Soyluu25
  • Çözüldü
Çözüldü  CSS NavBar Nasıl Alta Alınır?
Mesaj
3
Görüntüleme
1.546
249873
2
Yeniçocuk
HTML ve CSS ile Responsive nasıl yapabilirim?
Mesaj
1
Görüntüleme
656
Waltz
Waltz
2
  • Çözüldü
Çözüldü  CSS Grid ile resim responsive şekilde nasıl ayarlanır?
Mesaj
6
Görüntüleme
1.423
249873
2
2
Açılır menü kısmı responsive olarak nasıl yapılır?
Mesaj
3
Görüntüleme
1.326
Ecmel
Ecmel

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı