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

[kacper3355 0]

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 Październik 27, 2017 przez kacper3355 (zobacz historię edycji)

[Mega_88 0]

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

[kacper3355 0]

Dzięki za odpowiedź!

Ale niestety nie bardzo wiem jak to zastosować. Próbowałem zmienić wartość 1024 na 1100 i 1200 i nic.
Ma ktoś jakiś pomysł?

[kacper3355 0]

bump, potrzebuje to szybko naprawić

[Piotr GRD 608]

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;
    }
}

 

[kacper3355 0]

@Piotr GRD

@Mega_88

Bardzo wam dziękuje. Skorzystałem jednak z kodu od Mega_88, ale z instrukcją od Piotra ;-) Teraz wszystko działa

Pozdrawiam!

[Trolololo 0]

może znajdź w sieci jakieś gotowe rozwiązania dla takiego typu menu