Forward root element styles to mobile navigation menu

docs/css/main.css

@@ -48,6 +48,7 @@ mark {
 #flex-body {
     display: flex;
     flex: 1;
+    align-items: start;
 }
 
 #content-wrapper {
@@ -91,11 +92,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

docs/userGuide/syntax/navBars.mbdf

@@ -195,4 +195,38 @@ By default, if the `lower-navbar` slot is not specified, the site and page navig
 Component | Description
 --- | ---
 `page-nav-button` | Pulls any element with an identifier, `id=page-nav` into the menu. If no such element exists, it pulls any [page navigation menu]({{ baseUrl }}/userGuide/usingComponents.html#page-navigation-menus) used in the layout.
-`site-nav-button` | Pulls any element with an identifier, `id=site-nav` into the menu. If no such element exists, it pulls all [site navigation menu components]({{ baseUrl }}/userGuide/usingComponents.html#site-navigation-menus) used in the layout.
+`site-nav-button` | Pulls any element with an identifier, `id=site-nav` into the menu. If no such element exists, it pulls all [site navigation menu components]({{ baseUrl }}/userGuide/usingComponents.html#site-navigation-menus) used in the layout.
+
+****Styling the mobile page and site navigation menus****
+
+You may also wish to style your navigation content differently on mobile view.
+By default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.
+
+```css {.no-line-numbers heading="Css class attached to the root navigation element"}
+.mb-mobile-nav {
+    display: block !important;
+    margin: 0 !important;
+    border: none !important;
+    padding: 10px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+```
+
+If you require greater customisation, you may simply compose the respective selectors with the `.mb-mobile-nav` element.
+
+{{ icon_example }}
+
+```css {.no-line-numbers heading=""}
+#site-nav.mb-mobile-nav {
+  /* Be sure to add the !important css rule when overriding .mb-mobile-nav's properties! */
+  border: 1px solid black !important;
+  /* For other properties, there is no need. */
+  color: red;
+}
+```
+
+<box type="tip" seamless>
+
+Refer to the [layouts](../tweakingThePageStructure.md) section to find out how to add custom css files to a page!
+</box>

packages/cli/test/functional/test_site/expected/stylesheets/styles.css

@@ -48,6 +48,7 @@ mark {
 #flex-body {
     display: flex;
     flex: 1;
+    align-items: start;
 }
 
 #content-wrapper {
@@ -91,11 +92,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/cli/test/functional/test_site/stylesheets/styles.css

@@ -48,6 +48,7 @@ mark {
 #flex-body {
     display: flex;
     flex: 1;
+    align-items: start;
 }
 
 #content-wrapper {
@@ -91,11 +92,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/cli/test/functional/test_site_convert/expected/stylesheets/main.css

@@ -48,6 +48,7 @@ mark {
 #flex-body {
     display: flex;
     flex: 1;
+    align-items: start;
 }
 
 #content-wrapper {
@@ -91,11 +92,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/cli/test/functional/test_site_convert/non_markbind_site/stylesheets/main.css

@@ -48,6 +48,7 @@ mark {
 #flex-body {
     display: flex;
     flex: 1;
+    align-items: start;
 }
 
 #content-wrapper {
@@ -91,11 +92,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/cli/test/functional/test_site_templates/test_default/expected/stylesheets/main.css

@@ -48,6 +48,7 @@ mark {
 #flex-body {
     display: flex;
     flex: 1;
+    align-items: start;
 }
 
 #content-wrapper {
@@ -91,11 +92,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/core/template/default/stylesheets/main.css

@@ -48,6 +48,7 @@ mark {
 #flex-body {
     display: flex;
     flex: 1;
+    align-items: start;
 }
 
 #content-wrapper {
@@ -91,11 +92,11 @@ mark {
 
 #page-nav {
     display: block;
+    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 
 #page-nav .nav-component {
-    border-left: 1px solid lightgrey;
     max-height: 90vh;
 }
 

packages/vue-components/src/OverlaySource.vue

@@ -2,7 +2,14 @@
   <component :is="tagName" v-bind="$attrs">
     <slot></slot>
     <portal v-if="enablePortal" :to="to">
-      <slot></slot>
+      <component
+        :is="tagName"
+        v-bind="$attrs"
+        :class="[$vnode.data.staticClass || '', 'mb-mobile-nav']"
+        :style="$vnode.data.staticStyle"
+      >
+        <slot></slot>
+      </component>
     </portal>
   </component>
 </template>
@@ -36,3 +43,14 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+    .mb-mobile-nav {
+        display: block !important;
+        margin: 0 !important;
+        border: none !important;
+        padding: 10px !important;
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+</style>