[megoldva] Wordpress menü darabolás

 ( szz | 2018. április 15., vasárnap - 8:05 )

Az lenne a feladatom, hogy egy Wordpress oldalon úgy oldjam meg a menü (felső sorban történő) megjelenítését, hogy a logo középen ossza ketté a menüt. Azaz a logótól balra is, jobbra is látsszanak a menüpontok – számítógépen. Telefonon persze szépen "rejtésből" jöjjenek elő, ahogy az egy adaptív oldalhoz illik. Hogyan indulnátok el?

(Én azt tettem, hogy készítettem két menüt, de ez a telefonon nem jó, mert mindkét "rejtésből" ugyanaz akar előjönni.)
Szerk: Lett egy kamu (magyar és angol) menüpont, ami fölé odavarázsolom a logót, melyet a @media(max-width: 980px) részből eltüntetek (display:none).

Hozzászólás megjelenítési lehetőségek

A választott hozzászólás megjelenítési mód a „Beállítás” gombbal rögzíthető.

Menüpontok pozícionálása CSS-sel? Pont ott lesznek, ahová szeretnéd rakni.

"Telefonon persze szépen "rejtésből" jöjjenek elő, ahogy az egy adaptív oldalhoz illik. Hogyan indulnátok el?"

Utánaolvasnék. (Vagy megírnám 0-ról, vagy felraknék egy menu-plugint a sok közül.)

Sablont nem írtál.

De a Divi ezt alapból tudja.

--
-- Üvegfiú - Csontkemény harc
Tégy Jót!®

Flash a kinézett sablon neve.

Elmagyaráznám a megrendelőnek, hogy ez miért nem jó, és rábeszélném egy szimpla menüre. :DDDD

Viccen kívül: ez egmen is érdekel, mert hátha szembejön egy ilyen kérés. Így kapásból én is a css-ben kezdeném el megoldani szerintem.
---
Ó, hogy a hatalmas Kublaj kán üssön rajtad, és a házad népén!

Akár a középső menüpont lehetne maga a logó, ami a főoldalra visz. Ennek adsz egy egyedi osztályt és megformázod CSS-ben ahogy kell.
Mobilon meg rejted.

Köszi.

Még egy kérdés: ezt hogyan lehetne intelligensebben (rövidebben) megoldani?
A ".boxed .tg-container {width: 98%}" benne van már eredetileg is a @media részben a style.css-ben, és bizonytalan voltam abban, hogy el szabad-e hagynom a felülbíráló részben.

Az egyik (42-es) a magyar, a másik (48-as) az angol "kamu menüpont".

#menu-item-42.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-42 {
background-image: url("...logo.png");
padding-left: 11px;
padding-right: 13.6em;
color: #ffffff;
}

#menu-item-48.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-48 {
background-image: url("...logo.png");
padding-left: 11px;
padding-right: 13.6em;
color: #ffffff;
}

@media(max-width: 980px) {
.boxed .tg-container {
width: 98%;
}
#menu-item-42.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-42 {
display: none;
}
#menu-item-48.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-48 {
display: none;
}
}