Bootstrap - menu przesuwa się do góry po rozwinięciu

pytanie zadane 12 października 2020 w HTML i CSS przez Michał Samolewski Bywalec (2,240 p.)

Cześć,
jestem początkujący w bootstrapie i napotkałem jeden z pierwszych problemów.

Mam utworzone już standardowe menu, które po wciśnięciu togglera i tym samym rozwinięciu menu przesuwa całą sekcję trochę do góry. Chciałbym żeby było to statyczne i jedynie rozwijało się w dół bez tego widocznego przeskoku jaki teraz robi navbar-brand i 'hamburger'. Podejrzewam że da się to załatwić jedną klasą ale szukam od godziny i nie umiem znaleźć. Jest mi ktoś w stanie pomóc?

komentarz 12 października 2020 przez hoktaur Pasjonat (22,250 p.)

bez kodu 'bydzie' ciężko....

komentarz 12 października 2020 przez Michał Samolewski Bywalec (2,240 p.)

O Jezu przepraszam.

Nie wiem czemu się nie wstawił

<div class="container-fluid bg-white border-bottom nawigacja-fluid">

			<div class="container">

				<nav class="navbar navbar-light navbar-expand-md">

					<a class="navbar-brands" href="#"><img src="img/logo.png" alt="Nie udało się wczytać logo."></a>

					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu">
						<span class="navbar-toggler-icon"></span>
					</button>


					<div class="collapse navbar-collapse" id="mainmenu">

						<ul class="navbar-nav ml-auto">

							<li class="nav-item mr-3">
								<a class="nav-link" style="color: #47bac1;" href="#"> START </a>
							</li>

							<li class="nav-item dropdown mr-3 menu-area">
								<a class="nav-link" href="#" data-toggle="dropdown" role="button" aria-expanded="false" id="submenu" aria-haspopup="true"> OFERTA </a>

								<div class="dropdown-menu" aria-labelledby="submenu">

									<div class="row">

										<div class="col-sm-6 col-lg-3 submenu">
											<p>test</p>
											<a class="dropdown-item" href="#"> P2 </a>
											<a class="dropdown-item" href="#"> 3 </a>
											<a class="dropdown-item" href="#"> 4 </a>
										</div>

										<div class="col-sm-6 col-lg-3 submenu">
											<p>test</p>
											<a class="dropdown-item" href="#"> 1 </a>
											<a class="dropdown-item" href="#"> 2 </a>
											<a class="dropdown-item" href="#"> 2 </a>
										</div>

										<div class="col-sm-6 col-lg-3 submenu">
											<p>test</p>
											<a class="dropdown-item" href="#"> 3 </a>
											<a class="dropdown-item" href="#"> 4 </a>
											<a class="dropdown-item" href="#"> 5 </a>
											<a class="dropdown-item" href="#"> 6 </a>
										</div>

										<div class="col-sm-6 col-lg-3 submenu d-none d-sm-block">
											<a href="#" class="menu-photo">
												<img class="mx-auto d-block" width="200" src="img/logo.png" alt="nie udało się">
											</a>
										</div>

									</div>

								</div>

							</li>

							<li class="nav-item mr-3">
								<a class="nav-link" href="#"> SKLEP </a>
							</li>

							<li class="nav-item mr-3">
								<a class="nav-link" href="#"> O&nbsp;FIRMIE </a>
							</li>

							<li class="nav-item mr-3">
								<a class="nav-link" href="#"> WSPÓŁPRACA </a>
							</li>

							<li class="nav-item">
								<a class="nav-link" href="#"> KONTAKT </a>
							</li>

						</ul>

					</div>

				</nav>

			</div>
                 </div>

.nawigacja-fluid
{
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.navbar
{
	min-height: 85px;
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-nav li:hover>.dropdown-menu
{
	display: block;
}

.navbar-light .navbar-nav .nav-link
{
  color: #363636;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 15px;
	transition-duration: 0.25s;
	padding-top: 31px;
	padding-bottom: 31px;
}

.navbar-light .navbar-nav .nav-link:hover
{
	color: #47bac1;
	transition-duration: 0.25s;
}

.dropdown-menu
{
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	background-color: #ffffff;
	z-index: 1;
	border: none;
	border-top: 1px solid #f0f0f0;
	border-radius: 0 0 5px 5px;
	margin-top: 0px;
	width: 100%;
	padding: 0;
}

.menu-area
{
	position: static;
}

.submenu
{
	padding: 25px;
	border-right: 1px solid #f0f0f0;
	font-size: 13px;
	color: #252525;
}

.submenu p
{
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 14px;
	padding-left: 23px;
}


@media (max-width: 991px)
{
	.submenu:nth-child(3), .submenu:nth-child(4)
	{
		padding: 25px;
		border-right: 1px solid #f0f0f0;
		border-top: 1px solid #f0f0f0;
	}
}

/* and this styles the dropdwon trigger link, when open */
.navbar-nav .dropdown-item
{
  background-color: #fff;
	transition-duration: 0.25s;
}

.navbar-nav .dropdown-item:hover
{
	color: #47bac1;
	transition-duration: 0.25s;
}

#main-slider
{
	height: 600px;
}

komentarz 12 października 2020 przez Michał Samolewski Bywalec (2,240 p.)

@hoktaur, Tylko dopowiem jeszcze że zakomentowanie tej górnej belki z socialmedia nie naprawia błędu.

komentarz 12 października 2020 przez Michał Samolewski Bywalec (2,240 p.)

@hoktaur

usunięcie min-height z klasy .navbar rozwiązało problem.

Jednak ten zapis stosował p. Zelent w swoim tutorialu i u niego działało. Nie mogę tego tak zostawić bo chciałbym żeby ten div był wyższy

1 odpowiedź

odpowiedź 12 października 2020 przez Job102 Bywalec (2,050 p.)

Witam.

Spróbuj użyć klas marginesu: Bootstrap Spacing

Zmieniłem w Twoim kodzie HTML:

<nav class="navbar navbar-light navbar-expand-md my-3 m-md-0">

oraz CSS:

.navbar
{
    /*min-height: 85px;*/
    padding-top: 0;
    padding-bottom: 0;
}

Boostrap również posiada zdefinowane klasy padingu, także nie musisz dodawać 'padding-top', 'padding-bottom', wystarczy że dodasz w HTML'u do odpowiedniego znacznika klasę 'py-0'.

Mam nadzieję, że pomogłem. Robiłem trochę 'na ślepo', bo nie wszystko miałem widoczne, tak jak Ty na przedstawionych screenach.

Pozdrawiam.