Menu uitlijnen en witruimte tussenvoegen

  • daantjevermeer

    (@daantjevermeer)


    12 jaren, 2 maanden geleden

    Ik gebruik het theme Twenty eleven. Ik wil graag de menu-items in de navigatiebar rechts uitlijnen. Hoe doe ik dat?

    Daarnaast zou ik graag een extra witruimte invoegen tussen een 2 groepen menu-items. Hoe doe ik dat.

    website: http://www.cascreeert.com
    Dit is mijn code in de editor:

    /* =Menu
    ————————————————————– */

    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);
    background: -o-linear-gradient(#252525, #0a0a0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    background: -webkit-linear-gradient(#252525, #0a0a0a);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    clear: both;
    display: block;
    float: right;
    margin: 0 auto 6 px;
    width: 100%;
    }
    #access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    }
    #access li {
    float: left;
    position: relative;
    }
    #access a {
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
    }
    #access ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;
    }
    #access ul ul ul {
    left: 100%;
    top: 0;
    }
    #access ul ul a {
    background: #f9f9f9;
    border-bottom: 1px dotted #ddd;
    color: #444;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 168px;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    background: #efefef;
    }
    #access li:hover > a,
    #access a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
    }
    #access ul li:hover > ul {
    display: block;
    }
    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    font-weight: bold;
    }

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • wji

    (@wji)

    12 jaren, 2 maanden geleden

    je topmenu op rechts uitlijnen net voor searchvak:
    #access ul style.css lijn 556 voeg toe : float: right;

    witte lijntjes tussen je menu items:
    #access li style.css lijn 562 voeg toe: border-left:5px solid #FFFFFF

    Thread starter daantjevermeer

    (@daantjevermeer)

    12 jaren, 2 maanden geleden

    Dankjewel voor je antwoord, maar t lukt helaas nog niet. Heb float right toegevoegd, maar er verandert niets. Wat ik eigenlijk wil is het menu rechts uitlijnen, maar de search button in de header zetten of aan de linkerkant in de balk.

    En die andere vraag: ik bedoelde geen witte lijntjes, maar ik bedoelde dat je de ruimte tussen de menuitems kunt aanpassen. Eerste 3 menu-items staan even ver van elkaar, dan een wat breder leeg stuk, en dan de volgende 3 menu-items.

    Zou tof zijn als je weet hoe ik dit moet doen. Alvast bedankt.

    wji

    (@wji)

    12 jaren, 2 maanden geleden

    ruimte tussen menu’s aanpassen kan wel, bv na contact extra space van 60 pixels dit toevoegen aan je css:
    bv zo:

    {
#menu-item-71 > a
{margin-right:60px;
}

    search button andre pelk, lijn 671 zie je dit
    #branding .with-image #searchform

    Dit weghalen daaronder:
    top: auto;

    suc6 maar weer 😉

    Thread starter daantjevermeer

    (@daantjevermeer)

    12 jaren, 2 maanden geleden

    Thanks! Dat van die search button werkt! joehoe!
    Als ik helemaal wil verwijderen,is dat dan een kwestie van alles eruit gooien?

    /* Search Form */
    #branding #searchform{
    position: absolute;
    top: 3.8em;
    right: 7.6%;
    text-align: right;
    }
    #branding #searchform div {
    margin: 0;
    }
    #branding #s {
    float: right;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
    width: 72px;
    }
    #branding #s:focus {
    background-color: #f9f9f9;
    width: 196px;
    }
    #branding #searchsubmit {
    display: none;
    }
    #branding .only-search #searchform {
    top: 5px;
    z-index: 1;
    }
    #branding .only-search #s {
    background-color: #666;
    border-color: #000;
    color: #222;
    }
    #branding .only-search #s,
    #branding .only-search #s:focus {
    width: 85%;
    }
    #branding .only-search #s:focus {
    background-color: #bbb;
    }
    {
    top: auto;
    bottom: -27px;
    max-width: 195px;
    }
    #branding .only-search + #access div {
    padding-right: 205px;
    }

    ???

    Misschien een domme vraag, maar waar kan ik in mijn editer vinden waar mijn meu-items staan..zoals bv contact? Ik vind wel iets algemeens over menu..maar weet niet waar ik die tekst moet toevoegen waar jij het over hebt?

    En als ik nu menu wil uitlijnen helemaal rechts nu search button weg is, weet je dan toevallig ook hoe ik dat kan doen?

    En om lettertype en grootte aan te passen, zou je dat in een childtheme doen of rechtstreeks in de cms? En waar zou je dat
    kunnen doen?

    Idem voor witruimte tussen menu en content verkleinen?

    Bedankt alvast..je bent mijn redder in nood..
    Ben nogal een leek 😉

    Groeten Daan

    wji

    (@wji)

    12 jaren, 2 maanden geleden

    Een hoop vragen 🙂
    -Tekst kan je toevoegen in je style.css, bv helemaal onderaan het er gewoon bij plakken. Vergeet de { en de } niet.

    -menu-items aanmaken of weggoeien: onder weergave in je dashboard.

    -menu uitlijnen op rechts bv in style.css lijn 676 dit deleten:
    padding-right:205px;

    -Childtheme kan soms ook, maar zou ik niet doen nu, meestal kan je in een thema wel custom css toevoegen in het dashboard, zodat bij updates je aanpassingen bewaard blijven. Kan niet zien hoe dat bij jou zit.

    -Lettertypes aanpassen, witruimte, etc, ook in je style.css

    succes. Jan.

    wji

    (@wji)

    12 jaren, 2 maanden geleden

    search onzichtbaar maken:
    regel 655 style.css:
    #branding .only-search #searchform

    regel toevoegen:
    display:none;

    Thread starter daantjevermeer

    (@daantjevermeer)

    12 jaren, 2 maanden geleden

    Dankjewel voor al je input!

    Ik heb het helaas allemaal nog niet voor elkaar gekregen.
    Wilde tekst helemaal rechts uitlijnen waar eerst de search button stond.
    Dat is me gelukt door heel de searchbutton te deleten in ‘weergave’ ,maar nu plopt ie opeens weer op boven mijn navigatiebar?? Enig idee hoe ik de search button helemaal weg krijg?

    Daarnaast lukt het trucje niet om contact button een marge te geven van 60 px.
    {
    #menu-item-71 > a
    {margin-right:60px;
    }

    Ik neem aan dat ik menu-item moet vervangen door contact??
    en waar staan die -71 & gt voor??
    Nog andere ideetjes??

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Het onderwerp ‘Menu uitlijnen en witruimte tussenvoegen’ is gesloten voor nieuwe reacties.

Tags