CSS Nav Bar'ı responsive olarak ayarlama

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.

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:Panoya kopyala

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.

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