diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
index e9b8b0c370..f11d148ab8 100644
--- a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
+++ b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
@@ -45,6 +45,11 @@ import { t } from '../../l10n.js'
 import MenuIcon from 'vue-material-design-icons/Menu.vue'
 import MenuOpenIcon from 'vue-material-design-icons/MenuOpen.vue'
 
+/**
+ * The NcAppNavigationToggle component is used typically alongside another header navigation component.
+ * It emits the status of whether the button has been clicked or not.
+ *
+ */
 export default {
 	name: 'NcAppNavigationToggle',
 
@@ -55,6 +60,11 @@ export default {
 	},
 
 	props: {
+		/**
+		 * Tracks whether the toggle has been clicked or not.
+		 * If it has been clicked, switches between the different MenuIcons
+		 * and emits a boolean indicating its opened status
+		 */
 		open: {
 			type: Boolean,
 			required: true,
@@ -69,6 +79,10 @@ export default {
 		},
 	},
 	methods: {
+		/**
+		 * Once the toggle has been clicked, emits the toggle status
+		 * so parent components can gauge the status of the navigation button
+		 */
 		toggleNavigation() {
 			this.$emit('update:open', !this.open)
 		},
diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index 0be3c0432d..87fe40ab70 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -347,8 +347,8 @@ $externalMargin: 8px;
 	width: var(--header-height);
 	height: var(--header-height);
 
-	#{&}__trigger {
-		width: var(--header-height) !important;
+	&__trigger {
+		width: var(--header-height);
 		height: var(--header-height);
 		opacity: .85;