update navbar

opengisch · Jun 6, 2024 · 8c109bc · 8c109bc
1 parent 8a9ff8f
commit 8c109bc
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 125 deletions.
diff --git a/certified-hardware.html b/certified-hardware.html
@@ -27,41 +27,46 @@
 
 <body>
 
-  <div id="navbar" class="navbar navbar-default navbar-fixed-top">
-    <div class="container">
-      <div class="navbar-header">
-        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="./"><img src="images/qfield-logo.svg"> QFIELD </a>
-      </div>
 
-      <div class="collapse navbar-collapse nav-collapse">
-        <ul class="nav navbar-nav">
-          <li><a href="https://www.opengis.ch/category/qfield/highlights/" target="_blank"
-              title="Highlights">Highlights</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org/get-started/support/" title="Get support">Get support</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org/get-started/sponsor/" title="Donate to QField">Donate</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://opengis.ch/#contact" title="Contact Us">Contact Us</a></li>
-        </ul>
-      </div>
+<!-- Section #0: navigation -->
+<nav id="navbar" class="navbar navbar-default navbar-fixed-top">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav"
+        aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="./"><img src="images/qfield-logo.svg"> QFIELD </a>
+    </div>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="nav navbar-nav">
+
+        <li><a href="https://www.opengis.ch/category/qfield/highlights/" target="_blank"
+            title="Highlights">Highlights</a></li>
+        <li><a href="https://docs.qfield.org/get-started/support/" title="Get support">Get support</a></li>
+        <li><a href="https://docs.qfield.org/get-started/sponsor/" title="Donate to QField">Donate</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+            aria-expanded="false">Resources<span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="https://docs.qfield.org/success-stories/" title="Succes stories">Succes stories</a></li>
+            <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
+            <li><a href="https://www.opengis.ch/category/qfield/" title="Blog">Blog</a></li>
+            <li><a href="/partner.html" title="Partner programs">Partner programs</a></li>
+            <li><a href="/sdgs.html" title="Sustainable development goals">Sustainability</a></li>
+            <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a>
+            </li>
+            <li><a href="https://github.com/opengisch/qfield" title="Source code">Source code</a></li>
+          </ul>
+        </li>
+        <li><a href="https://opengis.ch/#contact" title="Contact Us">Contact Us</a></li>
+      </ul>
     </div>
   </div>
+</nav>
 
   <!-- Section #1: carousel -->
 

diff --git a/certified-trainer.html b/certified-trainer.html
@@ -27,41 +27,46 @@
 
 <body>
 
-  <div id="navbar" class="navbar navbar-default navbar-fixed-top">
+<!-- Section #0: navigation -->
+  <nav id="navbar" class="navbar navbar-default navbar-fixed-top">
     <div class="container">
       <div class="navbar-header">
-        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav"
+          aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="./"><img src="images/qfield-logo.svg"> QFIELD </a>
       </div>
-
-      <div class="collapse navbar-collapse nav-collapse">
+      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="nav navbar-nav">
+
           <li><a href="https://www.opengis.ch/category/qfield/highlights/" target="_blank"
               title="Highlights">Highlights</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
           <li><a href="https://docs.qfield.org/get-started/support/" title="Get support">Get support</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
           <li><a href="https://docs.qfield.org/get-started/sponsor/" title="Donate to QField">Donate</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
+          <li class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+              aria-expanded="false">Resources<span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="https://docs.qfield.org/success-stories/" title="Succes stories">Succes stories</a></li>
+              <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
+              <li><a href="https://www.opengis.ch/category/qfield/" title="Blog">Blog</a></li>
+              <li><a href="/partner.html" title="Partner programs">Partner programs</a></li>
+              <li><a href="/sdgs.html" title="Sustainable development goals">Sustainability</a></li>
+              <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a>
+              </li>
+              <li><a href="https://github.com/opengisch/qfield" title="Source code">Source code</a></li>
+            </ul>
+          </li>
           <li><a href="https://opengis.ch/#contact" title="Contact Us">Contact Us</a></li>
         </ul>
       </div>
     </div>
-  </div>
+  </nav>
+
 
   <!-- Section #1: carousel -->
 

diff --git a/css/qfield.css b/css/qfield.css
@@ -3,14 +3,18 @@ body {
   /* background-color: #f4f4f4; */
 }
 
-div.navbar {
+#navbar {
   margin-bottom:0px !important;
   height: 100px;
   background-color:#80CC28;
   border:0;
   font-family:TruenoLight;
 }
 
+#navbar .open>a, #navbar .open>a:hover, #navbar .open>a:focus {
+  background-color:rgba(0, 0, 0, 0.2);
+}
+
 div.navbar li a {
   padding: 10px !important;
 }

diff --git a/index.html b/index.html
@@ -27,41 +27,45 @@
 
 <body>
 
-  <div id="navbar" class="navbar navbar-default navbar-fixed-top">
+<!-- Section #0: navigation -->
+  <nav id="navbar" class="navbar navbar-default navbar-fixed-top">
     <div class="container">
       <div class="navbar-header">
-        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav"
+          aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="./"><img src="images/qfield-logo.svg"> QFIELD </a>
       </div>
-
-      <div class="collapse navbar-collapse nav-collapse">
+      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="nav navbar-nav">
+
           <li><a href="https://www.opengis.ch/category/qfield/highlights/" target="_blank"
               title="Highlights">Highlights</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
           <li><a href="https://docs.qfield.org/get-started/support/" title="Get support">Get support</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
           <li><a href="https://docs.qfield.org/get-started/sponsor/" title="Donate to QField">Donate</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
+          <li class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+              aria-expanded="false">Resources<span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="https://docs.qfield.org/success-stories/" title="Succes stories">Succes stories</a></li>
+              <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
+              <li><a href="https://www.opengis.ch/category/qfield/" title="Blog">Blog</a></li>
+              <li><a href="/partner.html" title="Partner programs">Partner programs</a></li>
+              <li><a href="/sdgs.html" title="Sustainable development goals">Sustainability</a></li>
+              <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a>
+              </li>
+              <li><a href="https://github.com/opengisch/qfield" title="Source code">Source code</a></li>
+            </ul>
+          </li>
           <li><a href="https://opengis.ch/#contact" title="Contact Us">Contact Us</a></li>
         </ul>
       </div>
     </div>
-  </div>
+  </nav>
 
   <!-- Section #1: carousel -->
 
@@ -174,9 +178,10 @@ <h1>The most powerful and efficient way to manage your data on-the-go</h1>
   <section class="section-spacing text-center">
     <div class="container" style="max-width:1140px;">
       <div class="row">
-        <p>QField is the leading professional fieldwork app, revolutionizing geospatial data collection and management. 
+        <p>QField is the leading professional fieldwork app, revolutionizing geospatial data collection and management.
           Recognized as a Digital Public Good, QField not only excels in enterprise and professional applications but
-          also advances six <a href="/sdgs.html">United Nations Sustainable Development Goals (SDGs)</a>, promoting a sustainable and equitable future.
+          also advances six <a href="/sdgs.html">United Nations Sustainable Development Goals (SDGs)</a>, promoting a
+          sustainable and equitable future.
         </p>
         <p> Streamline your processes and boost productivity with QField's seamless ecosystem. Whether you're in remote
           locations or managing large-scale projects, our tools have you covered.</p>

diff --git a/partner.html b/partner.html
@@ -27,41 +27,46 @@
 
 <body>
 
-  <div id="navbar" class="navbar navbar-default navbar-fixed-top">
+<!-- Section #0: navigation -->
+  <nav id="navbar" class="navbar navbar-default navbar-fixed-top">
     <div class="container">
       <div class="navbar-header">
-        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav"
+          aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="./"><img src="images/qfield-logo.svg"> QFIELD </a>
       </div>
-
-      <div class="collapse navbar-collapse nav-collapse">
+      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="nav navbar-nav">
+
           <li><a href="https://www.opengis.ch/category/qfield/highlights/" target="_blank"
               title="Highlights">Highlights</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
           <li><a href="https://docs.qfield.org/get-started/support/" title="Get support">Get support</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
           <li><a href="https://docs.qfield.org/get-started/sponsor/" title="Donate to QField">Donate</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
+          <li class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+              aria-expanded="false">Resources<span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="https://docs.qfield.org/success-stories/" title="Succes stories">Succes stories</a></li>
+              <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
+              <li><a href="https://www.opengis.ch/category/qfield/" title="Blog">Blog</a></li>
+              <li><a href="/partner.html" title="Partner programs">Partner programs</a></li>
+              <li><a href="/sdgs.html" title="Sustainable development goals">Sustainability</a></li>
+              <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a>
+              </li>
+              <li><a href="https://github.com/opengisch/qfield" title="Source code">Source code</a></li>
+            </ul>
+          </li>
           <li><a href="https://opengis.ch/#contact" title="Contact Us">Contact Us</a></li>
         </ul>
       </div>
     </div>
-  </div>
+  </nav>
+
 
   <!-- Section #1: carousel -->
 

diff --git a/sdgs.html b/sdgs.html
@@ -28,41 +28,46 @@
 
 <body>
 
-  <div id="navbar" class="navbar navbar-default navbar-fixed-top">
+<!-- Section #0: navigation -->
+  <nav id="navbar" class="navbar navbar-default navbar-fixed-top">
     <div class="container">
       <div class="navbar-header">
-        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav"
+          aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="./"><img src="images/qfield-logo.svg"> QFIELD </a>
       </div>
-
-      <div class="collapse navbar-collapse nav-collapse">
+      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="nav navbar-nav">
+
           <li><a href="https://www.opengis.ch/category/qfield/highlights/" target="_blank"
               title="Highlights">Highlights</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
           <li><a href="https://docs.qfield.org/get-started/support/" title="Get support">Get support</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
           <li><a href="https://docs.qfield.org/get-started/sponsor/" title="Donate to QField">Donate</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
-          <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a></li>
-        </ul>
-        <ul class="nav navbar-nav">
+          <li class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+              aria-expanded="false">Resources<span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="https://docs.qfield.org/success-stories/" title="Succes stories">Succes stories</a></li>
+              <li><a href="https://docs.qfield.org" title="Documentation">Documentation</a></li>
+              <li><a href="https://www.opengis.ch/category/qfield/" title="Blog">Blog</a></li>
+              <li><a href="/partner.html" title="Partner programs">Partner programs</a></li>
+              <li><a href="/sdgs.html" title="Sustainable development goals">Sustainability</a></li>
+              <li><a href="https://docs.qfield.org/get-started/contribute/" title="Contribute to QField">Contribute</a>
+              </li>
+              <li><a href="https://github.com/opengisch/qfield" title="Source code">Source code</a></li>
+            </ul>
+          </li>
           <li><a href="https://opengis.ch/#contact" title="Contact Us">Contact Us</a></li>
         </ul>
       </div>
     </div>
-  </div>
+  </nav>
+
 
   <!-- Section #1: carousel -->