[yozz84]

Mireczki... Nie moge sobie z tym poradzić, choć poprzeglądałem już mase postów na http://stackoverflow.com

Mianowicie chciałbym aby menu "zapadało" mi sie przy < 1000px (ekranach które mają mniej jak 1000px). Nijak bez używania LESS nie mogę tego uczynić... Czy ma ktoś jakiś sprawdzony pomysł? Menu mam 2 poziomowe póki co ale będzie 3 poziomwe docelowo. Wszystko czego używałem powodowało iż po zapadnięciu się menu, naciśnięciu na przycisk dropdown w menu kolejna wartwa rozwalała sie i nie prezentowałą tak jak powinna (czyli rozsuwała się w dół).

#bootstrap #bootstrap3 #webdev #css

[husky83]

@yozz84: rozwiń pojęcie 'zapadło'

Może po prostu:

@media screen and (max-width: 1000px){ ... } 

[k.....a]

@yozz84: co to znaczy "zapadało"?

[yozz84]

@husky83: Mam na myśli pojawienie się menu w formie tego kwadratu - "Collapsed"

[yozz84]

Obecnie jest ustawione standardowo na < 768px

[husky83]

@yozz84: ja to zrobiłem w czystym css - w tym co wyżej pokazałem ukrywasz UL, dodajesz dla LI display:inline-block i wyświetlasz kwadracik, który wcześniej był ukryty. Odkrywanie UL już w $.click
To tak w dużym skrócie.
Olałem bootstrapa, bo nie działało dokładnie tak jak bym tego chciał ;)

[yozz84]

@husky83: znalazłem coś takiego, ale tez nie działa tak jak powinno - tak jak bym chciał gdyż poniżej wartości 1000px pokazuje sie kwadracik menu, po kliknieciu pojawia sie standardowe menu tyle tylko ze nizej. A powinno sie pojawić w formie listy która idzie w dół. nie potrafie dojść do tego co jest nie tak.

@media (max-width: 759px) {
 .navbar-collapse {
 border-top: 0px solid transparent;
 box-shadow: none;
 }
}
@media (min-width: 760px)

[l.....l]

@yozz84: nie szalej z important jeśli nie musisz. To prawdopodobnie jest prosty problem, ale w ciemno raczej nikt nie pomoże. W jQuery stwóz funkcję toggleClass, a style pod tę funkcję dodaj tylko w media query.

[MattheV]

SlickNav i przystosowanie go do strony? Lekki skrypt i do tego można łatwo modyfikować, przyjaźnie napisany. ( ͡° ͜ʖ ͡°)

[yozz84]

Nie jestem aż tak zaawansowany stad też próba wykonania tego pod CSS. Kod który wkleiłem był znaleziony na wspomnianej w pierwszym poście stronie. Jest to raczej obejście problemu niż rozwiązanie. Strone mam ustawioną lokalnie na XAMPie stad też nie mam jak podać pełnego kodu. Nie mniej jednak nie różni się on od standardowego Bootstrap-a 3.3.1.. dostosowuje jedynie wygląd / kolorystykę w min. stopniu.

Patrząc na przykłąd i screen z tego komentarza: http://stackoverflow.com/a/18944192

[husky83]

@yozz84: boostrap ma standardowo określone pewne szerokości. Jeśli tutaj zmienisz, może się ostro posypać. Ja tak jak napisałem - do tego zadania olałbym bootstrapa i walczył ręcznie z css i js, na bazie @media (max-width: 1000px)

[k.....a]

@yozz84: masz w bootstrapie gotowe klasy - http://getbootstrap.com/components/#navbar

[yozz84]

Za pomocą Bootstrap Customize zmieniłem wartość @grid-float-breakpoint z @screen-sm-min na @screen-md-min, nastepnie wygenerowałem raz jeszcze pliki Bootstrapa, podmieniłem z tymi w themie i to w sumie rozwiązało mój problem. Dobrze że własne zmiany nanoszę w osobnych plikach css / js :) Najprostrze rozwiązanie okazało się nalepsze... szkoda ze wczesniej o tym nie pomyslalem... tylko chciałem to za pomocą "własnego css-a zmieniac ;P

Dziękuje za chęć pomocy i wskazówki.

Teraz musze poszukać