Bootstrap 5 - překrývající navigace – CSS – Fórum

Fórum › CSS

Bootstrap 5 - překrývající navigace

otula 0

Duch

31. 12. 2024 #1

Ahoj, chtěl bych poprosit o radu, jak v Bootstrapu docílit toho, aby se navigace bez třídy fixed-top chovala tak, že když je sbalená do tlačítka a kliknutím se rozbalí, překrývala obsah pod sebou a neodsouvala ho.

Pokud má třídu fixed-top, tak se takto chová, jenže mi nevyhovuje, že v tu chvíli navigační bar překrývá následující obsah.

Níže je jednoduchý demonstrační kód. V této podobě překrývá následující text, což nechci. Při zmenšení šířky prohlížeče a smrsknutí do tlačítka se ale rozbalovací navigace chová tak, jak potřebuji. Pokud odeberu prvku "nav" třídu fixed-top bude text začínat správně pod navigací, ale rozbalovací navigace bude text odsouvat, což právě nechci.

Dalo by se to asi řešit ponecháním fixed-top a nastavením margin top u následujícího obsahu, ale z určitých důvodů potřebuji mít začátek následujícího obsahu na pixel přesně hraničící s navigací a výška navigačního pruhu nemusí být fixní...

Poradíte mi, jak to nastavit?

<!DOCTYPE html>
<html lang="cs">

<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>

    <!-- Navbar Start-->
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background: black;">
        <button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav mx-auto p-4 p-lg-0">
                <a href="#" class="nav-item nav-link active">Jedna</a>
                <a href="#" class="nav-item nav-link">Dva</a>
                <a href="#" class="nav-item nav-link">Tři</a>
                <a href="#" class="nav-item nav-link">Čtyři</a>
            </div>
        </div>
    </nav>
    <!-- Navbar End -->

    <!-- Kontejner Start-->
    <div class="container-fluid p-0">
       Abcd<br>efgh<br>ijkl<br>mnop
    </div>
    <!-- Kontejner End-->


    <!-- Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>

Nahlásit jako SPAM

IP: 95.140.241.–

peter

~ Anonymní uživatel
~ 4022 příspěvků

3. 1. 2025 #2

hm, ne uplne to chapu. U CSS zalezi na poradi trid, podle toho prepisuje vlastnosti.
Fixed-top by melo fungovat asi stejne jako position:absolute. Pokud ne, tak si tam pridej tridu a dej ji position:absolute; Koukam, ze ma primo position-absolute class, takze nemusis pridavat vlastni :)

BT tam ma jeste sticky.
https://getbootstrap.com/…rs/position/
https://getbootstrap.com/…es/position/

Ja to obvykle delam tak, ze si udelam jednoduchy web pomoci BT a nejake spesl chovani si tam definuji pres vlastni class. Pac je to rychlejsi, nez zjistovat, zda to BT umi nebo ne :)

jeste bys mohl pouzit nav-tab, pripadne drop-down
https://getbootstrap.com/…s/navs-tabs/
https://getbootstrap.com/…ents/navbar/#…
https://getbootstrap.com/…s/navs-tabs/#…

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

Nahlásit jako SPAM

IP: 2a00:1028:de00:354:6a40:37f8:4bdb:7c5b...–

otula 0

Duch

4. 1. 2025 #3

#2 peter
Díky za reakci. Asi ten můj popis byl trochu matoucí. Já bych tu funkčnost "dropdown" potřeboval u responzivního designu po smrštění menu do tlačítka. Výchozí situace - mám klasické navigační menu na široké obrazovce. Pokud za něj (v HTML kódu) začnu vkládat obsah stránky s nulovými hodnotami margin a padding, nebude tento obsah začínat schovaný za navigační lištou, ale bude pod ní.

Když nyní okno prohlížeče zmenším, menu se mi smrskne do rozbalovacího tlačítka. A já bych chtěl, aby ta nabídka, která se po kliknutí na tlačítko rozbalí, obsah stránky neodsunula, ale překryla. (Tak, jak to udělá, pokud mám zafixovanou pozici navigační lišty.)

Nahlásit jako SPAM

IP: 95.140.241.–

peter

~ Anonymní uživatel
~ 4022 příspěvků

6. 1. 2025 #4

To je jednoduche :) Dej tam dropdown :)
menu1 - skryj uplne, kdyz neni dost mista
menu2 = menu1 - ale bude fungovat jako dropdown a objevi se po kliknuti

Ale, muzes to teda udelat bootstrapove, to resili kolegove na https://www.slu.cz/fpf/cz/ . tam to resi pres collapse

		<!-- Toggle get grouped for better mobile display -->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
				<span class="sr-only">Zobrazit navigaci</span>
				<span class="fa fa-bars"></span>
			</button>
			<!-- End Toggle -->


		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
			<div class="container">

<div id="snippet--menu">






			<ul class="nav navbar-nav">
















										<li class="dropdown mega-menu-fullwidth ">
											<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" target="_self">
												<i class="fa "></i> <span class="nav-label">
									Zaměstnanec</span>
													<span class="fa arrow"></span>
											</a>







			<ul class="dropdown-menu">

				<li>
					<div class="mega-menu-content disable-icons">
						<div class="container">
							<div class="row equal-height">


										<div class="col-md-3 equal-height-in">
										<ul class="list-unstyled equal-height-list">
										<li><h3>Vzdělávací a vědecko-výzkumná činnost</h3></li>

										<li>






					<li><a href="/fpf/cz/soukontakt" target="_self">
							Harmonogram akademického roku
						</a>
					</li>
					<li><a href="https://www.slu.cz/slu/cz/harmonogramhodnoceni" target="_blank">
							Harmonogram hodnocení
						</a>
					</li>
					<li><a href="https://czv.slu.cz/" target="_blank">
							Centrum celoživotního vzdělávání
						</a>
					</li>
....

Osobne si ale myslim, ze, kdyz je okno uz tak male, treba na mobilu, ze se navigace zobrazuje pod sebou, tak se muze klidne zobrazit jako blok a pod nej davat obsah. Tak jsem to resil na byvalem rar.cz. Normalne mela navigace stromovou strukturu po leve strane. Ale v pripade male sirky okna jsem zrusil veskere odsazeni a byla v obdelnickach pod sebou. Podobne to delaji prave kolegove na te strance slu.cz, akorad je tam to toglovani, ktere chces, ale neni tam prekryvani.

Nahlásit jako SPAM

IP: 2001:718:2601:258:16fd:a308:ef10:72e7...–

peter

~ Anonymní uživatel
~ 4022 příspěvků

6. 1. 2025 #5

jej, sory, jsem nesmazal z kodu prazdne radky :)

Nahlásit jako SPAM

IP: 2001:718:2601:258:16fd:a308:ef10:72e7...–

peter

~ Anonymní uživatel
~ 4022 příspěvků

6. 1. 2025 #6

preformatovano pres pspad

		
<!-- Toggle get grouped for better mobile display -->			
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">				
    <span class="sr-only">Zobrazit navigaci
    </span>				
    <span class="fa fa-bars">
    </span>			
</button>			
<!-- End Toggle -->		
<!-- Collect the nav links, forms, and other content for toggling -->		
<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">			
    <div class="container">
        <div id="snippet--menu">			
            <ul class="nav navbar-nav">										
                <li class="dropdown mega-menu-fullwidth ">											
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" target="_self">												
                        <i class="fa "></i> 
                        <span class="nav-label">									Zaměstnanec
                        </span>													
                        <span class="fa arrow">
                        </span>											</a>			
                    <ul class="dropdown-menu">				
                        <li>					
                        <div class="mega-menu-content disable-icons">						
                            <div class="container">							
                                <div class="row equal-height">										
                                    <div class="col-md-3 equal-height-in">										
                                        <ul class="list-unstyled equal-height-list">										
                                            <li><h3>Vzdělávací a vědecko-výzkumná činnost</h3>
                </li>										
                <li>					
                <li>
                <a href="/fpf/cz/soukontakt" target="_self">							Harmonogram akademického roku 						</a>					
                </li>					
                <li>
                <a href="https://www.slu.cz/slu/cz/harmonogramhodnoceni" target="_blank">							Harmonogram hodnocení 						</a>					
                </li>					
                <li>
                <a href="https://czv.slu.cz/" target="_blank">							Centrum celoživotního vzdělávání 						</a>					
                </li>....

Nahlásit jako SPAM

IP: 2001:718:2601:258:16fd:a308:ef10:72e7...–

peter

~ Anonymní uživatel
~ 4022 příspěvků

6. 1. 2025 #7

jeste by slo mozna pouzit pop-over misto dropdown
https://getbootstrap.com/…ts/popovers/

Nahlásit jako SPAM

IP: 2001:718:2601:258:16fd:a308:ef10:72e7...–

otula 0

Duch

7. 1. 2025 #8

#7 peter
Nějak se mi to nedaří skloubit funkčně dohromady. Asi se na to překrývání vykašlu, a nechám tam sticky-top...

Ale mockrát děkuji za snahu o pomoc.

Nahlásit jako SPAM

IP: 95.140.241.–

peter

~ Anonymní uživatel
~ 4022 příspěvků

8. 1. 2025 #9

Ono, prekryvani je vzdycky problematicke, ikdyz funguje, pokud je to pres css position:absolute. Jak rikam, proste, pro male displeje, bych to nepouzil. A taky se mi nechce se mi ted vrtat s kodem, abych ti dokazal, ze to jde. :)
Totiz, kdyz nekde neco prekryva, tak obvykle, kdyz to presahne jiste orzmery vuci obrazovce, tak to z ni vytece. A je to umistene jakoby nad strankou, takze ani rolovani se strankou na to moc nefunguje, hlavne doprava a doleva, atd :) Proste se muze stat, pri male strance a zvetsovani pisma nebo, kdyz dado menu nekdo dlouhy text, ze to pretece treba pres vic radku, odsujne to odkazy pod tim a ty vytecou mimo stranku a rolovanim se na ne nedostanes. Co vic si jako uzivatel muzes prat, nez odkazy, o kterych ani nevis ze tam jsou nebo se na ne klikas a ono nic nereaguje? :)

Nahlásit jako SPAM

IP: 2001:718:2601:258:e4bd:7f0a:f99:b793...–

← Zpět na seznam vláken ← Zpět do Fóra