Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][inne] Sticky navbar Bootstrap
Puchatek320
post
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
 
 Start new topic
Odpowiedzi
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 807
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/
Go to the top of the page
+Quote Post
Puchatek320
post
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

Posty w temacie
- Puchatek320   [CSS][inne] Sticky navbar Bootstrap   20.04.2020, 19:02:34
- - trueblue   [HTML] pobierz, plaintext <div class="col-...   20.04.2020, 20:27:56
|- - Puchatek320   Cytat(trueblue @ 20.04.2020, 21:27:56...   20.04.2020, 20:51:01
- - trueblue   Fajnie gdybyś wkleił kod np. na jsfiddle.net Patrz...   20.04.2020, 21:12:21
- - Puchatek320   https://jsfiddle.net/q8v7cemx/2/ okey, kod wrzuco...   20.04.2020, 21:40:27
- - trueblue   ad.1 Zmień fixed na sticky. ad.2 Usuń wysokość z o...   21.04.2020, 06:09:07

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 14.10.2025 - 07:37
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn