[JavaScript][CSS][HTML]Sidebar z Bootstrapa Opcje

[TheNortalf]

Witam

Pobrałem z bootsrapa sidebar https://startbootstrap.com/template-overvie...simple-sidebar/
Sprawa wygląda tak, że muszę go przerobić tak, żeby mieć 3 stany, duże rozdzielczości, tablet, oraz telefon.
Różnice wyglądają tak, że duże rozdzielczości mają mieć sidebar zawsze na wierzchu, tablety także, ale zamiast tekstu mają pojawić się ikony, a telefon ma mieć hamburger menu.

Jako że jestem całkowicie zielony w tworzeniu stron, na logikę doszedłem do kilku rzeczy ale nie mogę przeskoczyć pewnych problemów.

1. Dla dużych rozdzielczości, sidebar ma być zawsze na wierzchu.

[HTML] pobierz, plaintext 
<a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>
[HTML] pobierz, plaintext 

To jest mój przycisk który otwiera sidebar. Problem w tym, że nie potrafię wyciągnąć na wierzch mojego sidebara.
Grzebię w jego css ale nic się nie udaje. Jak więc wyciągnąć go na wierzch?

2. Telefony z kolei mają posiadać taki przycisk, jak więc zrobić to w ten sposób, aby na małych rozdzielczościach przycisk się pojawiał, ale na większych i dużych nie?
Taki sam problem mam dla tabletów. Jak to zrobić, żeby zamiast tekstu pojawiły się ikony tylko na tych rozdzielczościach.
Wiem (tak mi się wydaje) gdzie w CSS znajduje się partia kodu odpowiadająca mniejszym rozdzielczościom.
Zaczyna się od tego miejsca:

[HTML] pobierz, plaintext 
@media(min-width:768px) {
  #wrapper {
      .....
[HTML] pobierz, plaintext 

Ale przecież nie zdefiniuję pojawiania się przycisków w CSS, prawda?

[Azzoris]

Pokazywanie sidebara po kliknięciu w przycisk menuhamubrger
JavaScript : https://www.w3schools.com/jsref/event_onclick.asp
lub Jquery : https://api.jquery.com/click/
lub też : ściągnij bibliotekę skryptów JS Bootstrapa.

Widoczność elementów w zależności od rozdzielczości :

[HTML] pobierz, plaintext 
// Reguła działająca od 0 do 1200px szerokości wyświetlacza (włącznie z 1200px)
@media only screen and (max-width: 1200px) {
    .przyciskmenu {
        display:none; przycisk nie widoczny do rozdzielczości max 1200px
    }
 
// Reguła działająca od 0 do 786px szerokości wyświetlacza (włącznie z 786px), - będzie nadpisywać atrybuty klass przypisane wyżej ale max do 786px;
@media only screen and (max-width: 786px) {
    .przyciskmenu {
        display:block; // przycisk widoczny do rozdzielczości max 786px 
    }
[HTML] pobierz, plaintext 

Ten post edytował Azzoris 7.01.2018, 02:58:15