Responsive styling navigation

Author: w3bdesign

public/css/app.css

@@ -783,6 +783,10 @@ video {
   margin-bottom: 0.25rem;
 }
 
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -939,6 +943,18 @@ video {
   width: 1rem;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
+.w-36 {
+  width: 9rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }

public/js/app.js

@@ -21502,7 +21502,7 @@ var _hoisted_7 = /*#__PURE__*/_withScopeId(function () {
 });
 
 var _hoisted_8 = {
-  "class": "flex flex-row w-2/12 px-2 my-2 lg:hidden"
+  "class": "flex flex-row w-2/12 px-2 py-2 ml-8 lg:hidden"
 };
 var _hoisted_9 = {
   "class": "self-center block w-full mr-4"
@@ -21593,89 +21593,82 @@ var _hoisted_1 = {
   "class": "container flex flex-col justify-center px-0 pt-6 mx-auto mb-6"
 };
 var _hoisted_2 = {
-  "class": "flex flex-wrap"
-};
-var _hoisted_3 = {
-  "class": "w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12 flex flex-wrap"
+  "class": "flex flex-wrap justify-between"
 };
 
-var _hoisted_4 = /*#__PURE__*/_withScopeId(function () {
+var _hoisted_3 = /*#__PURE__*/_withScopeId(function () {
   return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
+    "class": "pr-2 my-2 overflow-hidden"
+  }, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
     "class": "ml-4 lg:ml-0 hidden md:block"
   }, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
     alt: "Logo",
     "class": "h-20 lg:h-24",
     "aria-label": "Nettbutikk logo",
     src: _img_svg_Logo_svg__WEBPACK_IMPORTED_MODULE_1__["default"]
-  })], -1
-  /* HOISTED */
-  );
-});
-
-var _hoisted_5 = /*#__PURE__*/_withScopeId(function () {
-  return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
+  })]), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
     alt: "Mobile logo",
     "class": "h-16 md:hidden block w-32",
     "aria-label": "Nettbutikk logo",
     src: _img_svg_MobileLogo_svg__WEBPACK_IMPORTED_MODULE_2__["default"]
-  }, null, -1
+  })], -1
   /* HOISTED */
   );
 });
 
-var _hoisted_6 = {
+var _hoisted_4 = {
   "class": "lg:hidden block"
 };
 
-var _hoisted_7 = /*#__PURE__*/_withScopeId(function () {
+var _hoisted_5 = /*#__PURE__*/_withScopeId(function () {
   return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
     "class": "hidden lg:w-1/12 lg:block"
   }, null, -1
   /* HOISTED */
   );
 });
 
-var _hoisted_8 = {
+var _hoisted_6 = {
   id: "nav-content",
   "class": "hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right",
   "aria-expanded": "false"
 };
-var _hoisted_9 = {
+var _hoisted_7 = {
   "class": "px-6 lg:px-0 lg:pt-5 xl:pt-7"
 };
-var _hoisted_10 = {
+var _hoisted_8 = {
   id: "block-main",
   role: "navigation",
   "aria-labelledby": "block-main-menu"
 };
-var _hoisted_11 = {
+var _hoisted_9 = {
   "class": "items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
 };
-var _hoisted_12 = {
+var _hoisted_10 = {
   "class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
 };
 
-var _hoisted_13 = /*#__PURE__*/_withScopeId(function () {
+var _hoisted_11 = /*#__PURE__*/_withScopeId(function () {
   return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
     "class": "text-2xl text-white no-underline lg:text-black link-underline link-underline-blue"
   }, " Home ", -1
   /* HOISTED */
   );
 });
 
-var _hoisted_14 = {
+var _hoisted_12 = {
   "class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
 };
 
-var _hoisted_15 = /*#__PURE__*/_withScopeId(function () {
+var _hoisted_13 = /*#__PURE__*/_withScopeId(function () {
   return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
     "class": "text-2xl text-white no-underline lg:text-black link-underline link-underline-blue"
   }, " Products ", -1
   /* HOISTED */
   );
 });
 
-var _hoisted_16 = {
+var _hoisted_14 = {
   "class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
 };
 function render(_ctx, _cache) {
@@ -21685,27 +21678,27 @@ function render(_ctx, _cache) {
 
   var _component_router_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("router-link");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("header", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [_hoisted_4, _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart_component)])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_mobile_menu), _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("nav", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("ul", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("header", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [_hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart_component)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_mobile_menu), _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("nav", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("ul", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
     tabindex: "0",
     to: "/"
   }, {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [_hoisted_13];
+      return [_hoisted_11];
     }),
     _: 1
     /* STABLE */
 
-  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
+  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
     tabindex: "0",
     to: "/products"
   }, {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [_hoisted_15];
+      return [_hoisted_13];
     }),
     _: 1
     /* STABLE */
 
-  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart_component)])])])])])])]);
+  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart_component)])])])])])])]);
 }
 
 /***/ }),

resources/js/components/Header/MobileMenu.vue

@@ -22,7 +22,7 @@
       </ul>
     </div>
     <div class="w-5/12 lg:hidden" />
-    <div class="flex flex-row w-2/12 px-2 my-2 lg:hidden">
+    <div class="flex flex-row w-2/12 px-2 py-2 ml-8 lg:hidden">
       <div class="self-center block w-full mr-4">
         <button
           id="nav-toggle"

resources/js/components/Header/Navbar.vue

@@ -3,8 +3,8 @@
     role="banner"
     class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6"
   >
-    <div class="flex flex-wrap">
-      <div class="w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12 flex flex-wrap">
+    <div class="flex flex-wrap justify-between">
+      <div class="pr-2 my-2 overflow-hidden">
         <div class="ml-4 lg:ml-0 hidden md:block">
           <img
             alt="Logo"
@@ -19,11 +19,19 @@
           aria-label="Nettbutikk logo"
           src="../../../img/svg/MobileLogo.svg"
         />
-        <div class="lg:hidden block">         
+        
+      </div>
+
+
+
+<div class="lg:hidden block">         
             <cart-component />         
         </div>
-      </div>
+
       <mobile-menu />
+
+
+
       <div class="hidden lg:w-1/12 lg:block" />
       <div
         id="nav-content"