From f85aa54698b43e854930d88759c51cd33415ccbe Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 5 Dec 2022 11:25:04 -0500 Subject: [PATCH] Correct the selectable area of burger nav 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. --- main.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/main.css b/main.css index 7c4baf0..cc44cea 100644 --- a/main.css +++ b/main.css @@ -52,18 +52,18 @@ tbody tr:nth-child(odd){background:#EEE} tbody tr:hover{background:#DDD} .burger-container{ -position:absolute;height:24px;width:30px; +position:absolute;height:21px;width:30px; cursor:pointer;top:34px;right:10px} #burger-toggle,#burger-toggle~nav{display:none} .burger,.burger::after,.burger::before{ position:absolute;background:#000; height:4px;width:30px;border-radius:2px;content:""; transition:transform 300ms cubic-bezier(.4,1,.5,1)} -.burger::before{margin-top:-8px} -.burger::after{margin-top:8px} +.burger::before{margin-top:8px} +.burger::after{margin-top:16px} #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::after{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:8px;transform:rotate(-45deg)} #burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)} @media print{body{max-width:none}}