diff --git a/assets/css/radix.style.css b/assets/css/radix.style.css
index 4758802..5cda2e2 100644
--- a/assets/css/radix.style.css
+++ b/assets/css/radix.style.css
@@ -36,3 +36,31 @@ fieldset.card legend {
           box-sizing: initial;
 }
 
+#drupal-off-canvas .inline-block-list.nav,
+#drupal-off-canvas .card-body .links.nav {
+  display: block;
+}
+
+#drupal-off-canvas textarea:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas select:not(.js-off-canvas-computed-ignore) {
+  background: #ffffff;
+  color: #595959;
+}
+
+#drupal-off-canvas input[type=date]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=datetime]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=datetime-local]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=email]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=month]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=number]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=password]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=search]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=tel]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=text]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=time]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=url]:not(.js-off-canvas-computed-ignore),
+#drupal-off-canvas input[type=week]:not(.js-off-canvas-computed-ignore) {
+  background: #ffffff;
+  color: #595959;
+}
+
diff --git a/includes/menu.inc b/includes/menu.inc
index c38c815..8d47b69 100644
--- a/includes/menu.inc
+++ b/includes/menu.inc
@@ -12,7 +12,7 @@ function radix_preprocess_menu(&$variables, $hook) {
   if ($hook == 'menu__toolbar') {
     return;
   }
-  
+
   // Get the current path.
   $current_path = \Drupal::request()->getRequestUri();
 
@@ -80,3 +80,21 @@ function radix_preprocess_links__dropbutton(&$variables) {
     }
   }
 }
+
+/**
+ * Implements template_preprocess_links().
+ */
+function radix_preprocess_links(&$variables) {
+  $links = &$variables['links'];
+
+  // Do nothing if we have no links.
+  if (!count($links)) {
+    return;
+  }
+
+  // Add nav-link class.
+  foreach ($links as $key => $link) {
+    $links[$key]['link']['#options']['attributes']['class'][] = 'nav-link';
+  }
+
+}
diff --git a/src/components/offcanvas/_offcanvas.scss b/src/components/offcanvas/_offcanvas.scss
index 851d38c..29ebbb9 100644
--- a/src/components/offcanvas/_offcanvas.scss
+++ b/src/components/offcanvas/_offcanvas.scss
@@ -1,3 +1,33 @@
 #drupal-off-canvas {
   box-sizing: initial;
+
+  .inline-block-list.nav,
+  .card-body .links.nav {
+    display: block;
+  }
+
+  textarea:not(.js-off-canvas-computed-ignore),
+  select:not(.js-off-canvas-computed-ignore) {
+    background: #ffffff;
+    color: #595959;
+  }
+
+  input {
+    &[type="date"]:not(.js-off-canvas-computed-ignore),
+    &[type="datetime"]:not(.js-off-canvas-computed-ignore),
+    &[type="datetime-local"]:not(.js-off-canvas-computed-ignore),
+    &[type="email"]:not(.js-off-canvas-computed-ignore),
+    &[type="month"]:not(.js-off-canvas-computed-ignore),
+    &[type="number"]:not(.js-off-canvas-computed-ignore),
+    &[type="password"]:not(.js-off-canvas-computed-ignore),
+    &[type="search"]:not(.js-off-canvas-computed-ignore),
+    &[type="tel"]:not(.js-off-canvas-computed-ignore),
+    &[type="text"]:not(.js-off-canvas-computed-ignore),
+    &[type="time"]:not(.js-off-canvas-computed-ignore),
+    &[type="url"]:not(.js-off-canvas-computed-ignore),
+    &[type="week"]:not(.js-off-canvas-computed-ignore) {
+      background: #ffffff;
+      color: #595959;
+    }
+  }
 }
diff --git a/templates/navigation/links.html.twig b/templates/navigation/links.html.twig
index 1b926fa..f8725e5 100644
--- a/templates/navigation/links.html.twig
+++ b/templates/navigation/links.html.twig
@@ -12,7 +12,7 @@
   {%- for item in links -%}
     <li{{ item.attributes.addClass('nav-item') }}>
       {%- if item.link -%}
-        <a href="{{ item.link['#url'] }}" class="nav-link">{{ item.link['#title'] }}</a>
+        {{ item.link }}
       {%- elseif item.text_attributes -%}
         <span{{ item.text_attributes.addClass('nav-link') }}>{{ item.text }}</span>
       {%- else -%}