Krijg het nav menu niet naar wens gestyled WP3

  • Opgelost Translatoria

    (@translatoria)


    12 jaren, 9 maanden geleden

    Ik krijg het menu op deze pagina niet zoals ik het wil
    http://www.spinsister.nl/WP/

    1) Er zit een stukje wit tussen de banner en het menu dat ik niet kan thuisbrengen en dus ook niet verwijderen.
    2)Ik wil de container waarin de nav ul zit over de gehele breedte een achtergrond kleur geven, maar dat lukt me niet.

    Ik heb geprobeerd .menu-primary-menu-container een bg-color te geven, maar die doet niets. Vervolgens heb ik de hele navbar in een eigen menuwrapper gestopt en die geprobeerd te stylen, maar ook dat lukt niet.

    Ik dacht dat het niet moeilijk was, maar ik zit helemaal vast.

    Uw hulp wordt zeer gewaardeerd!

    (Ik heb hier een poos geleden ook al eens een vraag over gesteld, maar kan mijn eigen vraan nergens meer vinden.)

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Shmoo

    (@macpresss)

    12 jaren, 9 maanden geleden

    Probeer eens dit in je stylesheet:

    #menu-primary-menu.menu {
     width: 100%;
     height: 22px;
     background: #f60;
     margin: 0;
     padding: 0 0 0 40px;
}
    Thread starter Translatoria

    (@translatoria)

    12 jaren, 9 maanden geleden

    Geweldig! Het stukje wit is nu weg. (Je had je vertikt met de bg-color).

    Kun je me vertellen waar ik fout ging?
    Jij stylt een id met de class menu, maar ik zie nergens in de code een id, alleen classes:

    <div class="menu-primary-menu-container"><ul id="menu-primary-menu" class="menu"><li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-32"><a href="http://www.spinsister.nl/WP/">home</a></li>

    etc.

    Ik ben blij dat het wit weg is, maar hoe krijg je dat me die style regel voor elkaar? Komt dat door die margin 0 en padding top 0?

    Nogmaals, reuze bedankt!

    Shmoo

    (@macpresss)

    12 jaren, 9 maanden geleden

    Je Thema heeft maar een hele beperkte stylesheet.

    Er is bijv. geen CSS Reset.
    http://meyerweb.com/eric/tools/css/reset/

    Hiermee zet je bepaalde standaarden waar een browser altijd op kan terugvallen.

    Als je dit soort dingen niet doet en je gaat met Un-ordered Lists werken < ul > dan kan het wel eens zijn dat deze auto. een default margin en padding krijgen. Dit moet je weer weg- clearen door een margin 0; en padding 0; te gebruiken.
    Alleen als ik dat zou doen komt het menu koud links tegen de kantlijn aan te staan vandaar dat ik met de padding: 0 0 0 40px; het menu 40pixels naar rechts duw.

    En zodra dat gedaan is dan is het niet meer dan een breedte + hoogte mee te geven en een achtergrond kleur.

    Thread starter Translatoria

    (@translatoria)

    12 jaren, 9 maanden geleden

    Bedankt voor de duidelijke uitleg. Dit is mijn eerste WP site: het overzetten van een statische site die ik jaren geleden gemaakt heb. Ik moet nog heel veel leren en dan is het fijn als iemand zo helpt en zo goed kan uitleggen.

    Het style sheet is beperkt omdat ik het zelf gemaakt heb om overzicht te houden. Die WP stylesheets zijn zo uitgebreid dat ik door de bomen het bos niet zie en ik wil (voorlopig) toch alleen maar statische sites maken. Ik gebruik WP meer als een cms dan als een blog tool.

    O ja, nog één vraag, als ik mag: Waar haal je die #menu-primary-menu vandaan? Die zie ik nergens in de gegenereerde html code.
    Nogmaals: dank!

    m19

    (@m19)

    12 jaren, 9 maanden geleden

    Op je laatste vraag:

    <ul id=”menu-primary-menu” class=”menu”>

    een id roep je aan met een # en een class met een .

    Thread starter Translatoria

    (@translatoria)

    12 jaren, 9 maanden geleden

    Dat weet ik, maar ik zie helemaal geen id in de code, wel classes.
    Mijn gepruts met ccs was gebaseerd op de html-code die ik in mijn browsers gegenereerd zag.

    Kennelijk speelt er meer. Vandaar: hoe kwam jij op het idee om een #menu-primary-menu.menu te stylen? Hoe wist je dat die bestond?

    Helaas ben ik niet zo duidelijk in het vragen stellen als jij in ze te beantwoorden.

    Maar mijn dank blijft overeind.

    Shmoo

    (@macpresss)

    12 jaren, 9 maanden geleden

    Die ID op de Un-ordered List wordt waarschijnlijk aangemaakt door de Menu Code van WordPress.

    Jij hebt waarschijnlijk zoiets ongeveer ergens staan in je code:

    <div class="menu-primary-menu-container">
     <?php wp_nav_menu(); ?>
</div>

    En die List wordt dan aangemaakt door de PHP code wp_nav_menu

    En door in de Broncode van je website te kijken..
    http://i50.tinypic.com/vyb1a9.png

    Thread starter Translatoria

    (@translatoria)

    12 jaren, 9 maanden geleden

    Alweer reuze bedankt! Jij gebruikt kennelijk ook Chrome om naar de broncode te kijken. Dat had ik ook gedaan, maar ik had die id op de ul over het hoofd gezien. Ik had naar de divs gekeken.

    Trouwens, in mijn enthousiasme over het uiterlijk van de menubalk, heb ik niet in de gaten gehad dat het menu zelf niet werkt! De submenu’s rollen niet uit.

    Daar ga ik me nu maar op concentreren.

    De code die je aangeeft, heb ik inderdaad in mijn functions.php staan.

    Je kunt goed uitleggen!

    Shmoo

    (@macpresss)

    12 jaren, 9 maanden geleden

    Ik gebruik de Safari browser omdat ik niet graag mijn informatie deel met Google.
    😉

    Maar het komt op het zelfde neer ja. Beide browsers zijn Webkit browsers alleen is Google Chrome natuurlijk iets bekender omdat ze reclame kunnen maken op de homepage van Google.com YouTube.com en de rest van de kermis die Google bezit.

    Safari heeft dat niet en moet het dus echt hebben van mensen die bewust voor deze dienst kiezen.

    Thread starter Translatoria

    (@translatoria)

    12 jaren, 9 maanden geleden

    O, ik dacht het scherm van Google Chrome in je screen shot te herkennen.

    Overigens heb ik zojuist de hele site waar ik aan bezig was, weggehaald. Ik ga nu WP de-installeren en helemaal opnieuw beginnen omdat het menu maar niet wilde werken – ook niet toen ik op zoek naar de oorzaak, overgeschakeld was op het 2010 thema.

    Ik heb van deze poging veel geleerd, ook dank zij jouw hulp, en zal daar de volgende keer van profiteren.

    Waarschijnlijk zul je hier wel vaker vragen van mij voorbij zien komen…

10 reacties aan het bekijken - 1 tot 10 (van in totaal 10)
  • Het onderwerp ‘Krijg het nav menu niet naar wens gestyled WP3’ is gesloten voor nieuwe reacties.