Skocz do zawartości
kacper3355

Problem z responsywnym menu na różnych rozdzielczościach

Polecane posty

Witam,

Mam problem z responsywnym menu, a mianowicie, do 959px szerokości strony wszystko jest ok (działa wtedy menu mobilne) ale od 960px uruchamia się zwykłe menu (desktopowe) i menu się rozwala (ucina połowę górnej części - i nie, nie zasłania tego pasek nawigacyjny Wordpressa). Chciałbym by menu mobilne włączało się do powiedzmy 1100px szerokości (a później już normalne, desktopowe). Byłbym bardzo wdzięczny, gdyby ktoś wskazał mi CSS za pomocą którego mogę to zmienić. Sam siedzę przy tym od dłuższego czasu i nie mogę tego zmienić...

 

Oto o co mi chodzi na screenach:

https://imgur.com/a/VxZC0 - dobrze (959px)

https://i.imgur.com/ZQ5oAOb.jpg - źle (960px)

 

Adres strony której dotyczy problem - https://goo.gl/2JbxNM

 

Z góry dziękuje za pomoc :-)

Edytowano przez kacper3355 (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
95 wiersz style.css


@media only screen and (max-width:1024px) {

.site-title-left {

margin-top: -30px;

margin-bottom: -30px;

}


Dodatkowo rozdzielczości Ci się nakładają, zmieniasz menu na mobile ale wysokość belki zostaje dla desktop do pewnego momentu 960 - 1024

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Pamiętaj, że używasz tzw. "child theme", więc część kodu używana jest ze stylu nadrzędnego, a część nadpisujesz w swoim "dziecku". To co chcesz zmienić ujęte jest w stylu nadrzędnym, ale nie modyfikuj go, pliki stylu nadrzędnego zostaw takie jakie są, dzięki czemu będziesz mógł w przyszłości dokonywać uaktualnień bez utraty swoich własnych zmian. Zmiany dokonuj tylko w swoim "dziecku".

 

Zatem z pliku "/wp-content/themes/type/style.css" skopiuj do pliku "/wp-content/themes/type-child-theme/style.css" prezentowany przeze mnie poniżej na samym końcu fragment (nie testowałem, ale to powinno być właśnie to, być może nawet za duży fragment zaznaczyłem) i tu modyfikuj wartość "960px" według uznania.

 

 

ALE! menu nie-mobilne spokojnie mogłoby wyglądać dobrze w rozdzielczości 960+ px, gdybyś zrobił to, co zasugerował powyżej Mega_88, czyli we wskazanym przez niego fragmencie z ujemnymi marginesami zmień "1024" na "960".

 

Najpierw zastosuj zmianę sugerowaną przez Mega_88 (czyli zmień 1024 na 960 tam gdzie te ujemne marginesy dodajesz). Jak dla mnie wygląda to wówczas dobrze, nic ucięte nie jest. Jeśli zmieniasz typ menu przy 960px, to i rozmiar/marginesy zmieniaj tak samo przy 960px. Obecnie typ menu zmieniasz przy 960px, a rozmiar/marginesy przy 1024px, dlatego pomiędzy 960 a 1024 masz niedopasowane jedno do drugiego.

 

 

 

Poniższe TYLKO jeśli zmiana "1024" > "960" z ujemnymi marginesami Ci nie będzie odpowiadać.

 

@media screen and (min-width: 960px) {
    /* Navigation */
    .mobile-navbar,
    .main-navigation ul .dropdown-toggle {
    display: none;
    }
    .main-navbar {
    display: block;
    }
    .main-navigation {
    display: inline-block;
    }        
    .main-navigation ul {
    display: inline-block;
    background-color: transparent;
    text-align: center;
    }
    .main-navigation a,
    .main-navigation li {
    display: inline-block;
    }
    .main-navigation > ul > li > a {
    padding: 0 10px;
    margin: 0;
    color: #222;
    line-height: 40px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border: 0;
    opacity: 1;
    transition: color 0.3s ease-in-out 0s;
    }
    .main-navigation > ul > li.current-menu-item:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    left: 50%;
    bottom: -5px;
    ;
    background-color: #2e64e6;
    }
    .main-navigation > ul > li.menu-item-has-children > a,
    .main-navigation > ul > li.page_item_has_children > a {
    position: relative;
    }
    .main-navigation > ul > li.menu-item-has-children > a:after,
    .main-navigation > ul > li.page_item_has_children > a:after {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    
    /* Support for IE. */
    font-feature-settings: 'liga';
    
    content: "\E5CF";
    vertical-align: -20%;
    }
    .main-navigation > ul > li:hover > ul,
    .main-navigation > ul > li.focus > ul {
    top: 40px;
    }
    .main-navigation ul ul {
    display: block;    
    position: absolute;
    top: 30px;
    right: 0;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    border: 1px solid #ededed;
    transition: top 0.4s ease 0s, opacity 0.4s ease 0s;
    z-index: 99999;
    text-align: left;
    }
    .main-navigation > ul:before,
    .main-navigation > ul:after {
    content: none;
    }
    .main-navigation > ul > li > ul:before {
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    right: 40px;
    position: absolute;
    top: -8px;
    z-index: 19;
    }
    .main-navigation > ul > li > ul:after {
    border-bottom: 10px solid #ededed;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: "";
    right: 38px;
    position: absolute;
    top: -10px;
    z-index: 16;
    }
    .main-navigation ul ul a {
    width: 160px;
    padding: 10px 0;
    border-top: 1px solid #f2f2f2;
    }
    .main-navigation ul ul li:first-child > a {
    border-top: 0;
    }
    .main-navigation > ul > li > ul > li.menu-item-has-children > a:after {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    
    /* Support for IE. */
    font-feature-settings: 'liga';

    position: absolute;
    right: 15px;
    top: 13px;
    content: "\E5CF";
    vertical-align: middle;
    }
    .main-navigation ul ul ul {
    opacity: 0;
    top: 0;
    right: 100%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out 0s;
    }
}

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×