Menu top z classic theme

[Mariusz Soporowski]

Witam

Jestem na etapie przeróbki podstawowego menu z classic theme. Moduł z menu został przypięty do displayFullWidthNavi dzięki czemu menu rozciągnięte jest na całą szerokość strony.

Potrzebuje je troszkę wycentrować jak również aby linki składające się z dwóch fraz np. Technika mocowania załamywał się w następujący sposób:

Technika mocowania => Technika
                                             mocowania

 

Która linia odpowiada w theme.css za modyfikacje tego menu? Czy tu trzeba pobawić się z szerokością li? tylko gdzie? Czy jakieś zawijanie tekstu?

Dzięki za pomoc
 

 

[rrataj]

Wszystko zależy jakie klasy css masz dla tego menu. Takie coś powinno zadziałać:

.menu > ul.top-menu > li {
    max-width: 100px;/*Przykład*/
}

.menu > ul.top-menu > li > a {
	word-wrap: break-word;
	white-space: normal;
}

 

[Mariusz Soporowski]

1 hour ago, rrataj said:

Wszystko zależy jakie klasy css masz dla tego menu. Takie coś powinno zadziałać:

.menu > ul.top-menu > li {
    max-width: 100px;/*Przykład*/
}

.menu > ul.top-menu > li > a {
	word-wrap: break-word;
	white-space: normal;
}

 

Prawie dobrze, tylko menu wysuwane też odziedziczyło szerokość, przez co pod menu nie ma pełnego tła 😕

Widok na class'y z menu rozwijanym:

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: inherit;
    min-width: inherit;
    z-index: 18;
    position: absolute;
}
#header .menu, #header .menu>ul>li {
    display: inline-block;
    position: relative;
}
.top-menu .sub-menu ul[data-depth="1"]>li {
    float: left;
    margin: 0 1.25rem;
    clear: both;
}

.menu > ul.top-menu > li {
    max-width: 100px;/*Przykład*/
}

.menu > ul.top-menu > li > a {
    word-wrap: break-word;
    white-space: normal;
}

 

Jak jeszcze mogę te menu (przymocowane w displayFullWidthNavi... ) mogę wyśrodkować? 

Ewentualnie czy masz jakiś moduł menu (darmowy), który posiadałby menu rozwijane + foto kategorii i będzie na całą szerokość strony.
Coś typu MegaMenu tylko, które jest darmowe.

 

[rrataj]

Niestety nie znam żadnego darmowego modułu do menu który by miał funkcjonalność o której piszesz.

Żeby rozwiązać problem z podmenu:

.top-menu .popover.sub-menu {
   width: auto;
    max-width: initial ;
}

Żeby pomóc w wyśrodkowaniu musiałbym znać strukturę html lub mieć dostęp do strony.

 

[Mariusz Soporowski]

1 hour ago, rrataj said:

Niestety nie znam żadnego darmowego modułu do menu który by miał funkcjonalność o której piszesz.

Żeby rozwiązać problem z podmenu:

.top-menu .popover.sub-menu {
   width: auto;
    max-width: initial ;
}

Żeby pomóc w wyśrodkowaniu musiałbym znać strukturę html lub mieć dostęp do strony.

 

Aktualnie po zmianach to menu wygląda teraz tak: https://www.outletnarzedziowy.eu/
Odstęp pomiędzy ochrona pracy a technika mocowania jest też inny niż technika mocowania a technika pomiarowa, jak to zmienić?

[rrataj]

html #header .menu.js-top-menu {
    display: block;
    text-align: center;
}

To powinno pomóc.

[Mariusz Soporowski]

On 11/6/2020 at 4:01 PM, rrataj said:

html #header .menu.js-top-menu {
    display: block;
    text-align: center;
}

To powinno pomóc.

I też tak stało się

 

A jeszcze pytanko czy odstęp pomiędzy menu a submenu to jest w padding czy w margin ustalany?
Bo jak najeżdżam na link np. : narzędzia ręczne to nie można przejść do menu rozwijanego

 

[rrataj]

Można to rozwiązać np. tak: (choć nie jest to rozwiązanie idealne i responsywne). Ogólnie to niestety trzeba by spojrzeć na JS i CSS tego modułu i przerobić funkcjonalność pod tego nowego hooka.

#header .menu>ul>li {
height: 70px;
vertical-align: top;
}

 

[Mariusz Soporowski]

14 hours ago, rrataj said:

Można to rozwiązać np. tak: (choć nie jest to rozwiązanie idealne i responsywne). Ogólnie to niestety trzeba by spojrzeć na JS i CSS tego modułu i przerobić funkcjonalność pod tego nowego hooka.

#header .menu>ul>li {
height: 70px;
vertical-align: top;
}

 

Wielkie dzięki

Pozdrawiam