Fix navbar issues

Author: thandaanda

example/site-config.js

@@ -3,14 +3,14 @@ module.exports = {
 
   postsPerPage: 10, // Number of posts shown on paginated pages (changes this requires sometimes to delete the cache)
 
-  siteTitleMeta: "Wordpress Gatsby Starter", // This allows an alternative site title for meta data for pages.
+  siteTitleMeta: "Built with Draftbox", // This allows an alternative site title for meta data for pages.
   siteDescriptionMeta:
-    "A starter template to build amazing static websites with Wordpress and Gatsby", // This allows an alternative site description for meta data for pages.
+    "Lightning fast, secure front-end for your WordPress or Ghost blog, without coding", // This allows an alternative site description for meta data for pages.
 
   shareImageWidth: 1000, // Change to the width of your default share image
   shareImageHeight: 523, // Change to the height of your default share image
 
-  shortTitle: "Wordpress", // Used for App manifest e.g. Mobile Home Screen
+  shortTitle: "Built with Draftbox", // Used for App manifest e.g. Mobile Home Screen
   siteIcon: "favicon.png", // Logo in /static dir used for SEO, RSS, and App manifest
   backgroundColor: "#e9e9e9", // Used for Offline Manifest
   themeColor: "#15171A", // Used for Offline Manifest
@@ -30,10 +30,6 @@ module.exports = {
         label: "Contact",
         url: "https://wp-balsa-preview.draftbox.co/contact",
       },
-      {
-        label: "Contact1111",
-        url: "https://wp-balsa-preview.draftbox.co/contact111",
-      },
     ],
   },
   footer: {

gatsby-wordpress-theme-libre/src/components/navbar.js

@@ -93,8 +93,8 @@ const Navbar = () => {
           >
             ☰ Menu
           </button>
-          <div id="primary-menu" className="menu">
-            <ul>
+          <div className="menu-primary-container">
+            <ul id="primary-menu" className="menu">
               {navigation.map(({ label, url }, i) => {
               return url.startsWith("/") ||
                 url.startsWith(siteUrl) ||
@@ -124,7 +124,7 @@ const Navbar = () => {
             </ul>
           </div>{" "}
           <nav className="jetpack-social-navigation" role="navigation">
-          <div class="menu-social-container"><ul id="menu-social" class="menu">
+          <div className="menu-social-container"><ul id="menu-social" className="menu">
           {socialLinks.facebook && (
               <li className="menu-item">
                 <a

gatsby-wordpress-theme-libre/src/styles/global.css

@@ -2058,10 +2058,12 @@ object {
     margin-bottom: 10em;
   }
   .main-navigation {
-    display: inline-block;
+    display: flex;
+    align-items: center;
     margin-top: 0;
     text-align: right;
     vertical-align: middle;
+    flex-direction: column;
   }
   .main-navigation li {
     display: inline-block;
@@ -2074,6 +2076,8 @@ object {
   }
   .jetpack-social-navigation {
     margin-left: 1.75em;
+    display: flex;
+    align-self: flex-end;
   }
   .comment .comment-content {
     float: right;
@@ -2155,7 +2159,7 @@ object {
 }
 
 .active {
-  box-shadow: 0 2px 0 0 currentColor;
+  box-shadow: 0 2px 0 0 currentColor !important;
 }
 
 @font-face {