Custom menu styling css

  • Opgelost Casper B

    (@casper-b)


    12 jaren, 7 maanden geleden

    Goede avond iedereen,

    Ik ben momenteel met mijn menu bezig die ik in wordpress heb gemaakt. Ik heb een menu met aan de bovenkant ronde hoeken. Dit is met css3 gedaan en staat allemaal perfect. Alleen de current menu item krijg ik niet goed voor me kaar. De current is gewoon recht, maar moet alleen voor het laatste item, in mijn geval “contact” aan de rechter bovenkant een ronde hoek hebben.

    Ik ben goed met HTML/CSS maar krijg dit helaas niet voor me kaar. Kan iemand mij helpen?

    Mijn css ziet er als volgt uit:
    [code]
    #navwrapper {
    height: 48px;
    width: 100%;
    margin: 10px auto 0 auto;
    float: left;
    background: url(images/navigation/nav.jpg) repeat-x;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }
    .listnav li.current-menu-item a {
    color: #FFF;
    background: url(images/navigation/nav-active.jpg) repeat-x;
    -moz-box-shadow: inset 0 0 5px #5e5e5e;
    -webkit-box-shadow: inset 0 0 5px #5e5e5e;
    box-shadow: inset 0 0 5px #5e5e5e;
    }

    .listnav ul {
    list-style-type: none;
    width: 554px;
    margin: 0 auto 0 auto;
    padding: 0;
    float: right;
    }
    .listnav li {
    height: 50px;
    width: 110px;
    float: left;
    font-weight: bold;
    border-right: 1px solid #2d2d2d;
    }
    .listnav li:last-child {
    border: none;
    }

    .listnav li a {
    padding: 16px 0 18px 0;
    display: block;
    text-align: center;
    }

    [/code]
    De HTML code van WordPress ziet er als volgt uit:

    [code]
    <div id="navwrapper">

    <div class="listnav"><ul class="menu" id="menu-primary-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15" id="menu-item-15">Welkom
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14" id="menu-item-14">Waarneming
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13" id="menu-item-13">Cursussen
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12" id="menu-item-12">Kalender
    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-17 current_page_item menu-item-19" id="menu-item-19">Contact
    </div>
    </div>
    [/code]

    De css voor de current contact ziet er als volgt uit.
    [code]
    color: #FFF;
    background: url(images/navigation/nav-active.jpg) repeat-x;
    -moz-box-shadow: inset 0 0 5px #5e5e5e;
    -webkit-box-shadow: inset 0 0 5px #5e5e5e;
    box-shadow: inset 0 0 5px #5e5e5e;

    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;

    [/code]

    Bedankt alvast!

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Peter J. Herrel

    (@donutz)

    12 jaren, 7 maanden geleden

    Probeer dit eens:

    .listnav li:last-child.current-menu-item {
    border-top-right-radius: 5px;
}
    Thread starter Casper B

    (@casper-b)

    12 jaren, 7 maanden geleden

    Het is gelukt met het volgende:

    .listnav li#menu-item-19.current-menu-item a {
	color: #FFF;
	background: url(images/navigation/nav-active.jpg) repeat-x;
	-moz-box-shadow: inset 0 0 5px #5e5e5e;
	-webkit-box-shadow: inset 0 0 5px #5e5e5e;
	box-shadow: inset 0 0 5px #5e5e5e;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
}

    Ik heb helaas nog een klein probleempje en dat is dat ik geen a:active aan het menu kan toevoegen. Althans dan doet hij niks… Enig idee waar dat aan zou kunnen liggen.

    Hartelijk dank alvast.

    Gr. Casper

    Peter J. Herrel

    (@donutz)

    12 jaren, 7 maanden geleden

    Je kan een active class “manueel” toevoegen met een filter: http://wordpress.stackexchange.com/a/1250

    Thread starter Casper B

    (@casper-b)

    12 jaren, 7 maanden geleden

    Ja dat is mij wel gelukt, door middel van .current-menu-item. Maar mijn menu heeft witte tekst, de hover heeft een groene kleur voor de tekst en de current-menu-item heeft een groene achtergrond. Wanneer je over de current gaat met je muis, krijg je nog steeds de groene hover te zien, terwijl dit niet te zien is in de HTML CSS versie van mijn template…

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Het onderwerp ‘Custom menu styling css’ is gesloten voor nieuwe reacties.