responsive navigatie balk

[samyung]

hoi allemaal,

ik ben bezig met het design voor mijn navigatie balk en gebruik hiervoor de onderstaande code:
maar ik wil de balk graag zo maken dat hij responsive is en meegaat met de breedte van je beeldscherm. nu lukt dat wel door de afbeelding links een breedte in procenten mee te geven echter dit werkt niet bij het icontje? en is het ook mogelijk om het icoontje te veranderen naar een eigen plaatje? zodat ik niet hoef te werken met line-heights en font sizes

HTML:

<nav>

 <div class="nav">
 <div id="pil"><a href="index.html">
 <img alt="logoahmedewerker" src="afb/medew.png"/>
 </a></div>
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle"/>
        <div class="menu">
            <a href="#">Alle artikelen</a>
            <a href="#">Vragenformulier</a>
            <a href="#">ga direct naar werk.ah.nl</a>
            <a href="#">Ga direct naar sam</a>
        </div>
    </div>

</nav>

Cascading Stylesheet:

.nav {
   
    text-align: right;

    line-height: 70px;
    
}
.menu {
    margin: 0 30px 0 0;
}
.menu a {
    clear: right;
    text-decoration: none;
    color:#007AFF;
    margin: 0 10px;
    line-height: 70px;
    
}


label {

    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
    color:#007AFF;
}
#toggle {
    display: none;
}

 nav
 
 {background-color:#FFFFFF; width:100%;overflow: hidden;  top:0; position:fixed;}
#pil img{float:left; height:500px; height:86px; margin-left:20px; margin-top:3px; margin-bottom:3px;}

voor media queries

Cascading Stylesheet:

 label {
        display: block;
        cursor: pointer;
        
    }
    .menu {
        text-align: center;
        width: 100%;
        display: none;
        background-color:#FFFFFF;
    }
    .menu a {
        display: block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0;
     
    }
    #toggle:checked + .menu {
        display: block;
    }
#pil img {width:80%; height:auto; }

[ Voor 3% gewijzigd door RobIII op 29-11-2018 11:32 . Reden: code tags toegevoegd en links verwijderd ]

[RobIII]

Als je code post gebruik dan voortaan code tags a.u.b. Verder is 't handig als je code compleet genoeg is voor een fatsoenlijke indruk (en dat is 't niet) maar genoeg 'uitgekleed' om ons niet te vermoeien met zaken die niet relevant zijn. Tot slot mag je alle links vervangen door # ofzo (spam).

[ Voor 17% gewijzigd door RobIII op 29-11-2018 11:31 ]