nathan
/
aney.co.uk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Correct the selectable area of burger nav

Browse Source 
Since negative margin was used that part of the burger icon wasn't
selectable. Changed so no negative margin, which makes it aesthetically
worse, but functionally better.
develop
Nathan Steel 3 years ago
parent 1e757424e4
commit f85aa54698
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File

10
main.css
Unescape Escape View File

@ -52,18 +52,18 @@ tbody tr:nth-child(odd){background:#EEE}
tbody tr:hover{background:#DDD} tbody tr:hover{background:#DDD}
.burger-container{ .burger-container{
position:absolute;height:24px;width:30px; position:absolute;height:21px;width:30px;
cursor:pointer;top:34px;right:10px} cursor:pointer;top:34px;right:10px}
#burger-toggle,#burger-toggle~nav{display:none} #burger-toggle,#burger-toggle~nav{display:none}
.burger,.burger::after,.burger::before{ .burger,.burger::after,.burger::before{
position:absolute;background:#000; position:absolute;background:#000;
height:4px;width:30px;border-radius:2px;content:""; height:4px;width:30px;border-radius:2px;content:"";
transition:transform 300ms cubic-bezier(.4,1,.5,1)} transition:transform 300ms cubic-bezier(.4,1,.5,1)}
.burger::before{margin-top:-8px} .burger::before{margin-top:8px}
.burger::after{margin-top:8px} .burger::after{margin-top:16px}
#burger-toggle:checked~nav{display:block} #burger-toggle:checked~nav{display:block}
#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)} #burger-toggle:checked+.burger-container .burger::before{margin-top:8px;transform:rotate(45deg)}
#burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)} #burger-toggle:checked+.burger-container .burger::after{margin-top:8px;transform:rotate(-45deg)}
#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)} #burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)}
@media print{body{max-width:none}} @media print{body{max-width:none}}

Write Preview
Loading…
Cancel
Save