diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index f55fccb153abd7f9af4540cbc3999c84324541fb..46fd7313c16c6a12c55799979d43a876f6e33eff 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -37,6 +37,7 @@
     justify-content: flex-start;
     flex-wrap: nowrap;
     align-items: center;
+    flex-grow: 1;
 }
 
 .scratch-logo {
@@ -84,6 +85,16 @@
     background-color: $ui-black-transparent;
 }
 
+.menu-bar-item.growable {
+    max-width: 12rem;
+    flex: 1;
+}
+
+.title-field-growable {
+    flex-grow: 1;
+    width: 2rem;
+}
+
 .file-group {
     display: flex;
     flex-direction: row;
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 82b37b0b058c18380f74a5b017daada9e61a74b1..897fedc3f3166da91678c56be805566d0200b35d 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -393,12 +393,13 @@ class MenuBar extends React.Component {
                         <FormattedMessage {...ariaMessages.tutorials} />
                     </div>
                     <Divider className={classNames(styles.divider)} />
-                    <div className={classNames(styles.menuBarItem)}>
+                    <div className={classNames(styles.menuBarItem, styles.growable)}>
                         <MenuBarItemTooltip
                             enable
                             id="title-field"
                         >
                             <ProjectTitleInput
+                                className={classNames(styles.titleFieldGrowable)}
                                 onUpdateProjectTitle={this.props.onUpdateProjectTitle}
                             />
                         </MenuBarItemTooltip>
diff --git a/src/components/menu-bar/project-title-input.css b/src/components/menu-bar/project-title-input.css
index 84dcd0afcda19a459d091d4877ab52ea23bdf19c..0567ca76614924b6a09d57b1b0a2169ceac8d655 100644
--- a/src/components/menu-bar/project-title-input.css
+++ b/src/components/menu-bar/project-title-input.css
@@ -2,7 +2,10 @@
 @import "../../css/units.css";
 @import "../../css/z-index.css";
 
-$title-width: 12rem;
+/*
+If project-title-input.jsx is part of a menu bar say menu-bar.jsx, it can have additional css classes that
+can set a width for example or what it should do in a flex box (eg. grow).
+*/
 
 .title-field {
     border: 1px dashed $ui-black-transparent;
@@ -12,7 +15,6 @@ $title-width: 12rem;
     background-color: $ui-white-transparent;
     background-clip: padding-box;
     -webkit-background-clip: padding-box;
-    width: $title-width;
     height: auto;
     padding: .5rem;
 }
diff --git a/src/components/menu-bar/project-title-input.jsx b/src/components/menu-bar/project-title-input.jsx
index 8b927417fddb717b4ff2fdfdd948e0bf7222e873..b9b5aa6d8382e55c8483a4dde3290ae1ed6ad44a 100644
--- a/src/components/menu-bar/project-title-input.jsx
+++ b/src/components/menu-bar/project-title-input.jsx
@@ -36,7 +36,7 @@ class ProjectTitleInput extends React.Component {
     render () {
         return (
             <BufferedInput
-                className={classNames(styles.titleField)}
+                className={classNames(styles.titleField, this.props.className)}
                 maxLength="100"
                 placeholder={this.props.intl.formatMessage(messages.projectTitlePlaceholder)}
                 tabIndex="0"
@@ -49,6 +49,7 @@ class ProjectTitleInput extends React.Component {
 }
 
 ProjectTitleInput.propTypes = {
+    className: PropTypes.string,
     intl: intlShape.isRequired,
     onUpdateProjectTitle: PropTypes.func,
     projectTitle: PropTypes.string