From cd90b22569431650630e71ed48cf74a62ed275cc Mon Sep 17 00:00:00 2001 From: Nihaal Sharma Date: Sun, 4 Jun 2023 10:24:20 +0100 Subject: [PATCH] made all navaar items expand to full width --- style.css | 24 +++++------------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/style.css b/style.css index 308a4bf..f235fa0 100644 --- a/style.css +++ b/style.css @@ -53,11 +53,11 @@ .bar { width: 100%; position: fixed; + display: flex; list-style-type: none; padding: 0; overflow: hidden; background-color: rgba(255, 255, 255, 0.25); - list-style-type: none; -webkit-backdrop-filter: blur(2.5px); -moz-backdrop-filter: blur(2.5px); @@ -69,12 +69,13 @@ } .barItem { float: left; + flex: 1; text-align: center; } .barItem * { + display: block; color: #222; text-decoration: none; - display: block; font-size: 16px; padding: 12px; } @@ -84,13 +85,12 @@ .barItem a:hover { background-color: #111; color: #eee; - + -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); } - .bar:has(#barItem1:hover) #barItem2 { - + .bar:has(a:hover) .barItem { } /* Bar styling*/ @@ -124,18 +124,4 @@ p { width: 100%; } -} - -/* flexbox waffle */ -.flexContainer { - height: 300px; - display: flex; -} - -.flexItem { - margin: 10px; - background: orangered; - color: white; - flex-grow: 1; - background: purple; } \ No newline at end of file