Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][inne] Sticky navbar Bootstrap
Puchatek320
post 20.04.2020, 19:02:34
Post #1





Grupa: Zarejestrowani
Postów: 68
Pomógł: 0
Dołączył: 4.11.2019

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
trueblue
post 20.04.2020, 20:27:56
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
----- 

[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/


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
Puchatek320
post 20.04.2020, 20:51:01
Post #3





Grupa: Zarejestrowani
Postów: 68
Pomógł: 0
Dołączył: 4.11.2019

Ostrzeżenie: (0%)
-----

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


Ten post edytował Puchatek320 20.04.2020, 21:05:03
Go to the top of the page
+Quote Post
trueblue
post 20.04.2020, 21:12:21
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
Puchatek320
post 20.04.2020, 21:40:27
Post #5





Grupa: Zarejestrowani
Postów: 68
Pomógł: 0
Dołączył: 4.11.2019

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
trueblue
post 21.04.2020, 06:09:07
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

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ą.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 02:12
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn