Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][inne] Sticky navbar Bootstrap
Forum PHP.pl > Forum > Przedszkole
Puchatek320
20.04.2020, 19:02:34
Cześć,
Może ktoś mi wyjaśnić w jaki sposób ustawić test,test2,test3 tak aby po zmniejszeniu strony jak wejdziemy przez telefon to żeby elementy były pod sobą bo nie jestem w stanie tego ustawić...

Komputer test,test2,test3

telefon:
test
test2
test3

mam jeszcze pytanie odnośnie ".navbar a:hover, .dropdown:hover .dropbtn"
chciałbym aby zaznaczony był cały element tak żeby nie było widać czarnego ponieważ teraz jak najedzie się na element to widać czarny i mniejszy kwadrat czerwony a chciałbym żeby był cały czarny 

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.  
  4.     <meta charset="utf-8">
  5.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">     
  7.  
  8.     </head>
  9.  
  10.       <body>
  11.  
  12.   <div class="navbar-dark indigo fixed-top scrolling-navbar">
  13.     <div class="site-branding row " style="height:150px;background-color:#ddd">
  14.       <div class="col-sm-4 h-50">test</div>
  15.       <div class="col-sm-4 h-50">test2</div>
  16.       <div class="col-sm-4 h-50">test3</div>
  17.     </div>
  18.  
  19.     <nav class="navbar">
  20.       <div class="navbar">
  21.           <a href="#">Strona Główna</a>
  22.           <a href="#">Kategorie</a>
  23.           <a href="#">Test</a>
  24.           <div class="dropdown">
  25.             <button class="dropbtn">Wiecej
  26.               <i class="fa fa-caret-down"></i>
  27.             </button>
  28.             <div class="dropdown-content">
  29.               <a href="#">Link 1</a>
  30.               <a href="#">Link 2</a>
  31.               <a href="#">Link 3</a>
  32.             </div>
  33.           </div>
  34.         </div> 
  35.     </nav>
  36.   </div>
  37.  
  38.  
  39.  
  40.  
  41. <div class="body">
  42.   hdsah
  43.   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  44. test
  45.  
  46. </div>
  47.  
  48.  
  49.  
  50. </body>
  51.  
  52.  
  53.   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  54.   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  55.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  56. </html>
  57.  
  58.  
  59.  
  60.  
  61. <style>
  62.  /* Navbar container */
  63.  .navbar {
  64.   overflow: hidden;
  65.   background-color: #333;
  66.   font-family: Arial;
  67.   max-height: 35%;
  68. }
  69.  
  70. /* Links inside the navbar */
  71. .navbar a {
  72.   float: left;
  73.   font-size: 16px;
  74.   color: white;
  75.   text-align: center;
  76.   padding: 14px 16px;
  77.   text-decoration: none;
  78. }
  79.  
  80. /* The dropdown container */
  81. .dropdown {
  82.   float: left;
  83.   overflow: hidden;
  84. }
  85.  
  86. /* Dropdown button */
  87. .dropdown .dropbtn {
  88.   font-size: 16px;
  89.   border: none;
  90.   outline: none;
  91.   color: white;
  92.   padding: 14px 16px;
  93.   background-color: inherit;
  94.   font-family: inherit; /* Important for vertical align on mobile phones */
  95.   margin: 0; /* Important for vertical align on mobile phones */
  96. }
  97.  
  98. /* Add a red background color to navbar links on hover */
  99. .navbar a:hover, .dropdown:hover .dropbtn {
  100.   background-color: red;
  101. }
  102.  
  103. /* Dropdown content (hidden by default) */
  104. .dropdown-content {
  105.   display: none;
  106.   position: absolute;
  107.   background-color: #f9f9f9;
  108.   min-width: 160px;
  109.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  110.   z-index: 1;
  111. }
  112.  
  113. /* Links inside the dropdown */
  114. .dropdown-content a {
  115.   float: none;
  116.   color: black;
  117.   padding: 12px 16px;
  118.   text-decoration: none;
  119.   display: block;
  120.   text-align: left;
  121. }
  122.  
  123. /* Add a grey background color to dropdown links on hover */
  124. .dropdown-content a:hover {
  125.   background-color: #ddd;
  126. }
  127.  
  128. /* Show the dropdown menu on hover */
  129. .dropdown:hover .dropdown-content {
  130.   display: block;
  131. }
  132.  
  133. .body{
  134.   padding-top: 217px;
  135. }
  136.  
  137.  
  138.  
  139.  
  140.  
  141.  
  142. </style>
  143.  
  144.  
  145.  
  146.  
[HTML] pobierz, plaintext
trueblue
20.04.2020, 20:27:56 
[HTML] pobierz, plaintext 
  1. <div class="col-12 col-lg-4 h-50">test</div>
  2. <div class="col-12 col-lg-4 h-50">test2</div>
  3. <div class="col-12 col-lg-4 h-50">test3</div>
[HTML] pobierz, plaintext

Domyślnie "lg" to minimum 992px, jeśli chcesz kolejny próg, to zmień na "xl" (>=1200px).

Poczytaj:
https://getbootstrap.com/docs/4.0/layout/grid/
Puchatek320
20.04.2020, 20:51:01
Cytat(trueblue @ 20.04.2020, 21:27:56 ) *
[HTML] pobierz, plaintext 
  1. <div class="col-12 col-lg-4 h-50">test</div>
  2. <div class="col-12 col-lg-4 h-50">test2</div>
  3. <div class="col-12 col-lg-4 h-50">test3</div>
[HTML] pobierz, plaintext

Domyślnie "lg" to minimum 992px, jeśli chcesz kolejny próg, to zmień na "xl" (>=1200px).

Poczytaj:
https://getbootstrap.com/docs/4.0/layout/grid/


jeśli robię height na px to wszystko się rozwala na telefonie, jeśli próbuje ustawić na % to nie reaguje nie wiem czemu :/

[HTML] pobierz, plaintext 
  1. <div class="site-branding row " style="height:30%;background-color:#ddd">
[HTML] pobierz, plaintext
trueblue
20.04.2020, 21:12:21
Fajnie gdybyś wkleił kod np. na jsfiddle.net
Patrząc na kod nie za bardzo widać jak się zachowuje.

height:30% odnosi się do wysokości kontenera nadrzędnego. Czy nadałeś mu wysokość?

Klasa h-50, to 50% wysokości. Jeśli kontener ma 150px, to każdy element ma po 75px.
Puchatek320
20.04.2020, 21:40:27
https://jsfiddle.net/q8v7cemx/2/

okey, kod wrzucony
1. co zrobić żeby napis testowy był widoczny w przypadku jeśli zmniejszymy ekran? ponieważ jeśli będzie wąski ekran to napis testowy będzie ukryty pod sticky
2. co zrobić żeby zdjęcie zawsze zajmowało cały div
3. co zrobić żeby kolor czerwony zajmował całą wysokość po najechaniu myszki? a nie tylko mały kwadrat?
trueblue
21.04.2020, 06:09:07
ad.1 Zmień fixed na sticky.
ad.2 Usuń wysokość z obrazka.
ad.3 A nad tym pomyśl.

Poczytaj trochę o CSS, bo chyba rzuciłeś się na głęboką wodę ze swoją wiedzą.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.