diff --git a/src/App.vue b/src/App.vue
index 31c0becdafc..62da7add3f1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -451,6 +451,13 @@ export default {
 }
 </script>
 
+<style lang="scss">
+/** override toastify position due to top bar */
+body.has-topbar .toastify-top {
+	top: 65px !important;
+}
+</style>
+
 <style lang="scss" scoped>
 .content {
 	height: 100%;
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index ce6b674613a..fcecd5da862 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -283,6 +283,7 @@ export default {
 	},
 
 	mounted() {
+		document.body.classList.add('has-topbar')
 		document.addEventListener('fullscreenchange', this.fullScreenChanged, false)
 		document.addEventListener('mozfullscreenchange', this.fullScreenChanged, false)
 		document.addEventListener('MSFullscreenChange', this.fullScreenChanged, false)
@@ -294,6 +295,7 @@ export default {
 		document.removeEventListener('mozfullscreenchange', this.fullScreenChanged, false)
 		document.removeEventListener('MSFullscreenChange', this.fullScreenChanged, false)
 		document.removeEventListener('webkitfullscreenchange', this.fullScreenChanged, false)
+		document.body.classList.remove('has-topbar')
 	},
 
 	methods: {