diff --git a/src/components/navigation/base/navigation.scss b/src/components/navigation/base/navigation.scss
index 9f2b66a3c..abcc7937a 100644
--- a/src/components/navigation/base/navigation.scss
+++ b/src/components/navigation/base/navigation.scss
@@ -5,7 +5,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 99;
+    z-index: 10;
     border-bottom: 1px solid $active-gray;
 
     box-shadow: 0 0 3px $box-shadow-gray;
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index fdccd6c16..b93592f24 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -274,7 +274,12 @@ const PreviewPresentation = ({
                             </MediaQuery>
                         </FlexRow>
                         <FlexRow className="preview-row">
-                            <div className="guiPlayer">
+                            <div
+                                className={classNames(
+                                    'guiPlayer',
+                                    {fullscreen: isFullScreen}
+                                )}
+                            >
                                 {showCloudDataAlert && (
                                     <FlexRow className="project-info-alert">
                                         <FormattedMessage id="project.cloudDataAlert" />
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 9a6fce550..ae3286891 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -345,6 +345,7 @@ $stage-width: 480px;
         display: inline-block;
         position: relative;
         width: $player-width;
+        z-index: 1;
 
         $alert-bg: rgba(255, 255, 255, .85);
         .project-info-alert {
@@ -358,6 +359,10 @@ $stage-width: 480px;
             font-size: .95rem;
         }
 
+        &.fullscreen {
+            z-index: 200;
+        }
+
         @media #{$small} {
             width: 100%;
         }
diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx
index b083d1927..7eeb3842b 100644
--- a/src/views/preview/project-view.jsx
+++ b/src/views/preview/project-view.jsx
@@ -604,7 +604,7 @@ class Preview extends React.Component {
                             extensions={this.state.extensions}
                             faved={this.state.clientFaved}
                             favoriteCount={this.state.favoriteCount}
-                            isFullScreen={this.state.isFullScreen}
+                            isFullScreen={this.props.fullScreen}
                             isLoggedIn={this.props.isLoggedIn}
                             isNewScratcher={this.props.isNewScratcher}
                             isRemixing={this.state.isRemixing}