Bootstrap Navbar не остается липким во всех разделах ⇐ CSS

[Anonymous]

Код: Выделить всё

Jessica Kowalski


[*]





body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Arial', sans-serif;
background-color: #0D0D0D;
color: #EDEDED;
overflow: visible;
}

.container {
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 20px;
}

/* Dark overlay */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images.pexels.com/photos/1242348/pexels-photo-1242348.jpeg?auto=compress&cs=tinysrgb&w=1200');
background-size: cover;
opacity: 0.5;
}

.content {
position: relative;
text-align: center;
max-width: 600px;
margin: auto;
}

/* Header Section with Fixed Height */
#header-section {
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #0F0F0F, #444444);
}

#header-section h1 {
font-size: 3rem;
margin-bottom: 10px;
color: #E0E0E0;
}

#header-section h2 {
font-size: 1.5rem;
color: #AAAAAA;
margin-bottom: 20px;
}

#header-section .social-icons a {
font-size: 1.8rem;
color: #EDEDED;
transition: color 0.3s ease;
}

#header-section .social-icons a:hover {
color: #00E676;
}

/* Blog section styling */
.blog-section {
padding: 50px 0;
background-color: #1B1B1B;
}

.blog-section h2 {
text-align: center;
font-size: 3em;
color: #00E676;
margin-bottom: 30px;
font-weight: 700;
}

.card-title {
color: #00E676;
}

.card {
background-color: #333;
color: #EDEDED;
margin-bottom: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}

.card:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Remove global img styles to prevent conflicts */
/* img {
width: 100%;
height: 250px;
object-fit: cover;
} */

/* Apply styles specifically to card images */
.card-img-top {
width: 100%;
height: 250px;
object-fit: cover;
}

/* Gallery section */
.gallery-section {
padding: 50px 0;
background-color: #2A2A2A;
}

.gallery-section h2 {
text-align: center;
font-size: 2.5em;
margin-bottom: 40px;
font-weight: 700;
color: #EDEDED;
}

.card-body {
background-color: #3A3A3A;
color: #FFFFFF;
}

.card-title {
font-size: 1.5rem;
font-weight: bold;
color: #00E676;
}

/* Contact section styling */
.contact-section {
padding: 50px 0;
background-color: #1B1B1B;
color: #FFFFFF;
}

.contact-section h2 {
text-align: center;
font-size: 2.5em;
margin-bottom: 30px;
color: #EDEDED;
}

.form-control {
background-color: #444;
color: white;
border: none;
border-radius: 0.25rem;
}

.form-control:focus {
background-color: #444;
color: white;
border-color: #00E676;
}

.form-control::placeholder {
color: #BBB;
}

.btn-primary {
background-color: #00E676;
border: none;
}

.btn-primary:hover {
background-color: #00C569;
}

/* Google Maps section styling */
.google-map {
width: 100%;
height: 400px;
border: 0;
}












[list]

[url=#]Home[/url]

[*]
[url=#]Blog[/url]

[*]
[url=#]Highlights[/url]

[*]
[url=#]Contact[/url]

[/list]








Jessica Kowalski
Photographer &  Blogger

[url=#][i][/i][/url]
[url=#][i][/i][/url]
[url=#][i][/i][/url]







Highlights



[img]https://images.unsplash.com/photo-1542273917363-3b1817f69a2d[/img]

Beautiful Sunset

More Info



This is a beautiful sunset captured during an evening hike. The colors were mesmerizing, blending hues of orange, red, and purple.







[img]https://images.unsplash.com/photo-1493558103817-58b2924bce98[/img]

City Skyline

More Info



A stunning view of the city skyline just after sunset.  The lights of the city contrast beautifully with the night sky.







[img]https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0[/img]

Mountain Landscape

More Info



This is a serene mountain landscape showcasing the natural beauty of towering peaks and lush green valleys.













Latest Blogs



[img]https://images.unsplash.com/photo-1525609004556-c46c7d6cf023[/img]

Exploring Nature Photography
Discover the beauty of landscapes through tips on framing, light usage, and more in this detailed guide.
[url=#]Read More[/url]





[img]https://images.unsplash.com/photo-1481277542470-605612bd2d61[/img]

Travel Photography Essentials
Pack your gear and hit the road! A comprehensive guide on capturing vibrant travel photos.
[url=#]Read More[/url]





[img]https://images.unsplash.com/photo-1502920917128-1aa500764b36[/img]

Mastering Portraits
Learn how to take stunning portraits with proper lighting, posing,  and camera settings.
[url=#]Read More[/url]










Gallery







Contact





Name


Email address


Phone Number


Message


Submit





https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.086775191515!2d144.95565161566554!3d-37.8172099797517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf57723d4d7bc5a14!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1631877472276!5m2!1sen!2sau

Я использую Bootstrap для создания веб-сайта, и мне нужна панель навигации чтобы оставаться прикрепленным вверху страницы. Функция закрепления работает правильно, когда я нахожусь в разделе #header, но когда я прокручиваю его к другим разделам, панель навигации исчезает.
Вот упрощенная версия мой код:

Код: Выделить всё

body, html {
margin: 0;
padding: 0;
height: 100%;
}

#header-section {
height: 60vh;
/* Other styling */
}

.navbar {
position: sticky;
top: 0;
z-index: 1000;
}

Код: Выделить всё

Что я пробовал:

• Повышение z-индекса< /code> для панели навигации.
  
  Уменьшен z-индекс для других разделов.
  < /li>

Подробнее здесь: https://stackoverflow.com/questions/790 ... l-sections