Adiciona navbar responsiva

pythonNordeste · Nov 13, 2023 · 1f7230b · 1f7230b
1 parent 07d6ccd
commit 1f7230b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -22,18 +22,12 @@ footer h3 {
     font-family: manropeRegular;
 }
 
-.uk-logo img {
-    max-width: 150px; /* Maximum width */
-    min-width: 100px; /* Minimum width */
-    height: auto; /* Auto-adjusts the height to maintain aspect ratio */
-}
-
 .uk-navbar-container {
     background-color: #FFDA1F;
 }
 
 .uk-navbar-item {
-    font-family: bonoc;
+    font-family: bonoc !important;
 }
 
 .uk-footer {

diff --git a/index.html b/index.html
@@ -31,12 +31,14 @@
 </head>
 
 <body>
-
     <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
         <div class="uk-navbar-center">
-            <a class="uk-navbar-item" href="#">Inicio</a>
-            <a class="uk-navbar-item" href="#">Sobre</a>
-            <a class="uk-navbar-item" href="#">Patrocínio</a>
+            <ul class="uk-navbar-nav uk-visible@s">
+                <li><a class="uk-navbar-item" href="#">Inicio</a></li>
+                <li><a class="uk-navbar-item" href="#">Sobre</a></li>
+                <li><a class="uk-navbar-item" href="#">Patrocínio</a></li>
+            </ul>
+            <a href="#" class="uk-navbar-toggle uk-hidden@s" uk-navbar-toggle-icon uk-toggle="target: #sidenav"></a>
         </div>
 
         <div class="uk-navbar-right uk-padding-small">
@@ -45,6 +47,16 @@
             <a href="https://www.instagram.com/pythonnordeste" uk-icon="icon: instagram; ratio: 1.3"></a>
         </div>
     </nav>
+
+    <div id="sidenav" uk-offcanvas="flip: true" class="uk-offcanvas">
+        <div class="uk-offcanvas-bar">
+            <ul class="uk-nav">
+                <li><a class="uk-navbar-item" href="#">Inicio</a></li>
+                <li><a class="uk-navbar-item" href="#">Sobre</a></li>
+                <li><a class="uk-navbar-item" href="#">Patrocínio</a></li>
+            </ul>
+        </div>
+    </div>
     <div class="container">
         <div uk-grid class="hero">
             <img src="assets/images/LOGO-PYTHON-NORDESTE-2024.svg" class="uk-responsive-width"/>