CSS zoektocht naar pers. menu (nav)

  • jefgees

    (@jefgees)


    9 jaren, 9 maanden geleden

    Hoi beste WordPressers,

    Probeer al sinds enkele dagen een main menu te wijzigen.
    En kom er gewoon niet uit.
    Meer dan waarschijnlijk zie ik iets over het hoofd … of zoek ik in de verkeerde CSS sheet.

    Een gouden tip(s) zou meer dan welkkom zijn.

    Ik wil namelijk de site http://www.wandelfotograaf.be/index.html in WordPress gieten.
    Een eerste schuchtere poging is reeds te bewonderen via deze link: http://jefvandejumenas.wc.lt/
    Nu loop ik tegen een aantal problemen aan die eigenlijk steeds te herleiden zijn tot hetzelfde.
    Het theme waar ik voor gekozen heb is “customizr”.
    Hiervan is er een “Child theme” gemaakt zodat er niks zou kunnen verkeerd lopen.
    Dit “Child theme” bewerk ik eerst lokaal alvorens het naar de server te sturen.
    Heb ook verdere info gezocht op de site van customizr. Maar zonder resultaat.

    Nu zie ik bvb in de site http://jefvandejumenas.wc.lt/ op de hoofdpagina met behulp van Firebug volgende zin staan:
    <ul id=”menu-yvanmenu-2″ class=”nav tc-hover-menu”>

    Nu vind ik wel in de “Main” structuur (customizr/inc/assets/css/ black.css en black.min.css) van de site Custmizr zelf een 2 CSS files.
    Hierin vind ik wel de Main instellingen , maar nergens kan ik <ul id=”menu-yvanmenu-2″ class=”nav tc-hover-menu”>
    terug vinden. Denk toch dat het in deze structuur is dat ik veranderingen dien ik te brengen. Of heb ik het verkeerd??
    Alleen ik kan deze code nergens vinden. Heb via Topstyle al geprobeerd met de functie “Find” maar zoals reeds gemeld: geen resultaat.

    Probeer ook alles dezelfde achtergrond te geven (#0a0c23) naar analogie mey de site op be.

    Ben benieuwd naar jullie gouden tip(s).

    Vriendelijke groeten,

    Jef

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • LianneL

    (@liannel)

    9 jaren, 9 maanden geleden

    Als je een site nabouwt, moet je kijken in de nieuwe site welke elementen eigenschappen krijgen in de css die het uiterlijk bepalen, en dat is altijd op een ‘eigen’ manier gedaan. Soms moeten elementen van eigenschappen worden voorzien, die binnen de css van je nieuwe site zijn overgeslagen. Hier komt dit bijvoorbeeld voor bij de achtergrondbalk van het totale menu.

    Als je deze onderstaande code onderin je style.css zet, ben je al een heel einde op weg.

    .pull-menu-right .nav-collapse {
    width: 100%;
    height: 38px;
    float: left;
    line-height: 38px;
    background-image: linear-gradient(to bottom, #4E5ACD, #0E1130);
    border-radius: 10px;
    border: 1px solid #CC9100;
}

.navbar .nav > li > a {
    text-shadow: none;
    font-style: normal;
  font-family: Arial;
  line-height:px;
  color: #CC9100;
  font-size: 15px;
  text-transform:uppercase;

}
.navbar .nav > li.current-menu-item > a {
  color: #CC9100;
}

.navbar .nav > li > a:focus, .navbar .nav > li > a:hover {
  color:#fff;
}

.navbar .nav > li > a:first-letter {
    font-size: 15px;
}

.tc-header {
    background: #11163E;
}
.tc-header {
    min-height: 45px;
    background: #11163E;
}

.tc-header .brand h1, .site-title {
    font-size: 40px;
    font-family: "Arial";
    font-style: normal;
    text-shadow: none;
    font-size: 35px;
    font-weight: normal;
  margin: 17px 0px;
}

    groet,
    Lianne

    Thread starter jefgees

    (@jefgees)

    9 jaren, 9 maanden geleden

    Lianne,

    Allereerst de allerbeste wensen voor het nieuwe jaar.
    En tevens bedankt voor je interventie richting navigatie.
    Ben inderdaad al op goede weg dank zij je hulp
    Bij het verkleinen naar tab en/of phone komt de originele toggle menu met jouw bijgewerkte versie perfect te voorschijn. Allen blijft de nieuwe blauwe navigatiebalk “hangen” op het scherm. Navigatiebalk is leeg en er verschijnen twee schuivers die niet werken.

    Had eerst in gedachten om het oorspronkelijke menu van Customizr te gebruiken en aan te passen. Dit om te vermijden dat ik in allerlei valkuilen zou trappen en vallen.
    Wat jij hebt gemaakt is natuurlijk netter en cleaner. Alleen komt er dan uit een onverwachte hoek een nieuw probleem, zoals bij het toggle menu.

    Los ik dit op door aparte CSS te voorzien voor de verschillende layouts via volgende code?
    @media screen and (max-width: 960px) {
    }
    Of dien ik toch onder de motorkap van “Customizr” op zoek te gaan naar de code voor dit toggle menu?

    Alvast bedankt voor je tijd, wijze raad en vooral je kostbare tijd.

    Thnx,

    jef

    LianneL

    (@liannel)

    9 jaren, 9 maanden geleden

    Ook de allerbeste wensen.
    Je moet inderdaad verder css-en voor de tablet- en phone-versie met media-queries

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

    Succes!

    Thread starter jefgees

    (@jefgees)

    9 jaren, 9 maanden geleden

    Lianne,

    het heeft al bloed, zweet (heel veel) en tranen (een heel klein beetje) gekost om op jouw aangeven verder te gaan.
    Denk dat ik beter het huidige theme kan aanpassen en gebruik maken van de reeds aanwezige CSS.
    Probeer de WordPress site om te bouwen in de “geest” van de site.be
    Het lukt bijna helemaal.
    Alleen blijf ik nu steken bij het shadow gebeuren in de header. Wil wel de kleur behouden, maar niet de shadow.

    En bij de navigatie blijf ik steken bij de mainknoppen. deze kan ik niet wijzigen in een andere font en style. En eveneens daar is de shadow ook overduidelijk aanwezig.

    Is er misschien iemand die ma kan vertellen hoe ik van die shadow kan af geraken en hoe ik font en style kan wijzigen?

    gtrz,

    jef

    Thread starter jefgees

    (@jefgees)

    9 jaren, 9 maanden geleden

    Mocht er nog iemand interesse hebben, site staat online in wordpress
    http://www.wandelfotograaf.be
    bedankt voor jullie tips.
    grtz,
    jef

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘CSS zoektocht naar pers. menu (nav)’ is gesloten voor nieuwe reacties.