navigation bar edit css

marcelpadilla · Sep 16, 2024 · 3e74e8f · 3e74e8f
1 parent c439ce6
commit 3e74e8f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/Source/CSS/style.css b/Source/CSS/style.css
@@ -116,9 +116,11 @@ img.icon {
 }
 
 .header {
-   position: fixed;
+   /* position: fixed; */
+   position: sticky;
+   top: 0;
    width: 100%;
-   height: var(--header_height);
+   /* height: var(--header_height); */
    background-color: var(--main_color_light);
    z-index: 1000;
    border-bottom: 2px solid #000000;
@@ -127,16 +129,17 @@ img.icon {
 
 .headerSpacer {
    width: 100%;
-   height: var(--header_height);
-   height: calc(var(--header_height) + 4px);
+   /* height: var(--header_height); */
+   /* height: calc(var(--header_height) + 4px); */
+   height: auto;
 }
 
 
 
 .header .navigation {
    background-color: var(--main_color_dark);
    width: 100%;
-   height: var(--header_height);
+   /* height: var(--header_height); */
    z-index: 2;
    color: white;
    font-size: 16px;
@@ -152,13 +155,18 @@ img.icon {
    /* Vertically center items in the navigation bar */
    justify-content: center;
    /* Horizontally center the navigation links */
+   flex-wrap: wrap; /* Add this line */
+
+
 
 }
 
 ::-webkit-scrollbar {
    display: none;
 }
 
+
+
 .header .navigation a {
    background-color: var(--main_color_medium);
    position: relative;
@@ -649,12 +657,12 @@ table tr td {
 
 /* On narrow screens */
 /* @media (max-width: 550px) { */
-@media (max-aspect-ratio: 3/5) {
-   .header .navigation a {
+@media (max-aspect-ratio: 2.5/5) {
+   /* .header .navigation a {
       font-size: 8pt;
       padding-left: 2px;
       padding-right: 2px;
-   }
+   } */
 
    .page-container {
       display: flex;

diff --git a/index.html b/index.html
@@ -31,6 +31,7 @@
   gtag('config', 'G-YE3HMMJMWH');
 </script> -->
 
+
     <!-- ICON -->
     <link rel="shortcut icon" href="/Source/images/MP_New.png" type="image/x-icon">
 
@@ -71,6 +72,8 @@
 <body>
 
 
+
+
     <div class="page-container">