diff --git a/app/soapbox/components/sub_navigation.js b/app/soapbox/components/sub_navigation.js
index ef672035f..33287befa 100644
--- a/app/soapbox/components/sub_navigation.js
+++ b/app/soapbox/components/sub_navigation.js
@@ -31,8 +31,6 @@ class SubNavigation extends React.PureComponent {
     message: PropTypes.string,
     settings: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onOpenSettings: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    showAfter: PropTypes.number,
   }
 
   static contextTypes = {
@@ -40,8 +38,7 @@ class SubNavigation extends React.PureComponent {
   }
 
   state = {
-    sticking: false,
-    visible: typeof this.props.showAfter !== 'number',
+    scrolled: false,
   }
 
   handleBackClick = () => {
@@ -74,33 +71,16 @@ class SubNavigation extends React.PureComponent {
     window.removeEventListener('scroll', this.handleScroll);
   }
 
-  updateSticking = () => {
+  handleScroll = throttle(() => {
     if (this.node) {
       const { top } = this.node.getBoundingClientRect();
 
       if (top <= 50) {
-        this.setState({ sticking: true });
+        this.setState({ scrolled: true });
       } else {
-        this.setState({ sticking: false });
+        this.setState({ scrolled: false });
       }
     }
-  }
-
-  updateVisibile = () => {
-    const { showAfter } = this.props;
-
-    if (typeof showAfter === 'number') {
-      if (document.documentElement.scrollTop >= showAfter) {
-        this.setState({ visible: true });
-      } else {
-        this.setState({ visible: false });
-      }
-    }
-  }
-
-  handleScroll = throttle(() => {
-    this.updateSticking();
-    this.updateVisibile();
   }, 150, { trailing: true });
 
   handleOpenSettings = () => {
@@ -112,11 +92,11 @@ class SubNavigation extends React.PureComponent {
   }
 
   render() {
-    const { intl, message, settings: Settings, className, showAfter } = this.props;
-    const { sticking, visible } = this.state;
+    const { intl, message, settings: Settings } = this.props;
+    const { scrolled } = this.state;
 
     return (
-      <div className={classNames(className, 'sub-navigation', { 'sub-navigation--sticking': sticking, 'sub-navigation--hidden': !visible, 'sub-navigation--visible': visible, 'sub-navigation--show-after': typeof showAfter === 'number' })} ref={this.setRef}>
+      <div className={classNames('sub-navigation', { 'sub-navigation--scrolled': scrolled })} ref={this.setRef}>
         <div className='sub-navigation__content'>
           <button
             className='sub-navigation__back'
diff --git a/app/soapbox/features/account_timeline/components/column_settings.js b/app/soapbox/features/account_timeline/components/column_settings.js
index c174c6661..7836c01f0 100644
--- a/app/soapbox/features/account_timeline/components/column_settings.js
+++ b/app/soapbox/features/account_timeline/components/column_settings.js
@@ -1,55 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
-import IconButton from 'soapbox/components/icon_button';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import SettingToggle from '../../notifications/components/setting_toggle';
 
-const messages = defineMessages({
-  close: { id: 'lightbox.close', defaultMessage: 'Close' },
-});
-
 export default @injectIntl
 class ColumnSettings extends React.PureComponent {
 
   static propTypes = {
-    intl: PropTypes.object.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
   };
 
   render() {
-    const { intl, settings, onChange, onClose } = this.props;
+    const { settings, onChange } = this.props;
 
     return (
-      <div className='column-settings'>
-        <div className='column-settings__header'>
-          <h1 className='column-settings__title'>
-            <FormattedMessage id='account.column_settings.title' defaultMessage='Acccount timeline settings' />
-          </h1>
-          <div className='column-settings__close'>
-            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
-          </div>
-        </div>
-
-        <div className='column-settings__content'>
-          <div className='column-settings__row'>
-            <SettingToggle
-              prefix='account_timeline'
-              settings={settings}
-              settingPath={['shows', 'pinned']}
-              onChange={onChange}
-              label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
-            />
-            <SettingToggle
-              prefix='account_timeline'
-              settings={settings}
-              settingPath={['shows', 'reblog']}
-              onChange={onChange}
-              label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
-            />
-          </div>
+      <div>
+        <div className='column-settings__row'>
+          <SettingToggle
+            prefix='account_timeline'
+            settings={settings}
+            settingPath={['shows', 'pinned']}
+            onChange={onChange}
+            label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
+          />
+          <SettingToggle
+            prefix='account_timeline'
+            settings={settings}
+            settingPath={['shows', 'reblog']}
+            onChange={onChange}
+            label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
+          />
         </div>
       </div>
     );
diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js
index 49df26d9d..003ab8dda 100644
--- a/app/soapbox/features/account_timeline/index.js
+++ b/app/soapbox/features/account_timeline/index.js
@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { fetchAccount, fetchAccountByUsername } from '../../actions/accounts';
 import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines';
+import Icon from 'soapbox/components/icon';
 import StatusList from '../../components/status_list';
 import LoadingIndicator from '../../components/loading_indicator';
 import Column from '../ui/components/column';
@@ -18,7 +19,7 @@ import { fetchPatronAccount } from '../../actions/patron';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { getSettings } from 'soapbox/actions/settings';
 import { makeGetStatusIds, findAccountByUsername } from 'soapbox/selectors';
-import SubNavigation from 'soapbox/components/sub_navigation';
+import classNames from 'classnames';
 
 const makeMapStateToProps = () => {
   const getStatusIds = makeGetStatusIds();
@@ -81,6 +82,11 @@ class AccountTimeline extends ImmutablePureComponent {
     unavailable: PropTypes.bool,
   };
 
+  state = {
+    collapsed: true,
+    animating: false,
+  }
+
   componentDidMount() {
     const { params: { username }, accountId, accountApId, withReplies, me, patronEnabled } = this.props;
 
@@ -129,8 +135,18 @@ class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
+  handleToggleClick = (e) => {
+    e.stopPropagation();
+    this.setState({ collapsed: !this.state.collapsed, animating: true });
+  }
+
+  handleTransitionEnd = () => {
+    this.setState({ animating: false });
+  }
+
   render() {
     const { statusIds, featuredStatusIds, isLoading, hasMore, isBlocked, isAccount, accountId, unavailable, accountUsername } = this.props;
+    const { collapsed, animating } = this.state;
 
     if (!isAccount && accountId !== -1) {
       return (
@@ -161,12 +177,6 @@ class AccountTimeline extends ImmutablePureComponent {
 
     return (
       <Column transparent>
-        <SubNavigation
-          className='account__sub-navigation'
-          message={`@${accountUsername}`}
-          showAfter={300}
-          settings={ColumnSettingsContainer}
-        />
         <div className='account__section-headline'>
           <NavLink exact to={`/@${accountUsername}`}>
             <FormattedMessage id='account.posts' defaultMessage='Posts' />
@@ -177,6 +187,16 @@ class AccountTimeline extends ImmutablePureComponent {
           <NavLink exact to={`/@${accountUsername}/media`}>
             <FormattedMessage id='account.media' defaultMessage='Media' />
           </NavLink>
+          <div className='column-header__buttons'>
+            <button onClick={this.handleToggleClick}>
+              <Icon id='sliders' />
+            </button>
+          </div>
+        </div>
+        <div className={classNames('column-header__collapsible', { collapsed, animating })} onTransitionEnd={this.handleTransitionEnd}>
+          <div className='column-header__collapsible-inner'>
+            {(!collapsed || animating) && <ColumnSettingsContainer />}
+          </div>
         </div>
         <StatusList
           scrollKey='account_timeline'
diff --git a/app/soapbox/features/home_timeline/index.js b/app/soapbox/features/home_timeline/index.js
index 6c440127f..d746e9991 100644
--- a/app/soapbox/features/home_timeline/index.js
+++ b/app/soapbox/features/home_timeline/index.js
@@ -4,13 +4,11 @@ import { expandHomeTimeline } from '../../actions/timelines';
 import PropTypes from 'prop-types';
 import StatusListContainer from '../ui/containers/status_list_container';
 import Column from '../../components/column';
-import ColumnSettings from './containers/column_settings_container';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { getFeatures } from 'soapbox/utils/features';
-import SubNavigation from 'soapbox/components/sub_navigation';
 
 function FollowRecommendationsContainer() {
   return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_container');
@@ -101,24 +99,19 @@ class HomeTimeline extends React.PureComponent {
     const showSuggestions = features.suggestions && isEmpty && !isLoading && !done;
 
     return (
-      <Column label={intl.formatMessage(messages.title)} transparent={!showSuggestions} className='home-timeline'>
+      <Column label={intl.formatMessage(messages.title)} transparent={!showSuggestions}>
         {showSuggestions ? (
           <BundleContainer fetchComponent={FollowRecommendationsContainer}>
             {Component => <Component onDone={this.handleDone} />}
           </BundleContainer>
-        ) : (<>
-          <SubNavigation
-            message={intl.formatMessage(messages.title)}
-            settings={ColumnSettings}
-            showAfter={300}
-          />
+        ) : (
           <StatusListContainer
             scrollKey='home_timeline'
             onLoadMore={this.handleLoadMore}
             timelineId='home'
             emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
           />
-        </>)}
+        )}
       </Column>
     );
   }
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index fe4c09b99..401e3fcc5 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -335,13 +335,3 @@
     }
   }
 }
-
-.account__sub-navigation {
-  display: none;
-
-  @media (max-width: 897px) {
-    display: flex;
-    position: fixed;
-    margin: 0;
-  }
-}
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 7ae141104..61c3ab489 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -924,8 +924,8 @@
 }
 
 // Make MaterialStatus flush against SubNavigation
-.sub-navigation:not(.sub-navigation--hidden) ~ .slist .item-list > article:first-child .material-status__status,
-.sub-navigation:not(.sub-navigation--hidden) ~ .material-status:not(.material-status + .material-status) .material-status__status {
+.sub-navigation ~ .slist .item-list > article:first-child .material-status__status,
+.sub-navigation ~ .material-status:not(.material-status + .material-status) .material-status__status {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -940,7 +940,7 @@
     }
   }
 
-  .sub-navigation:not(.sub-navigation--hidden) ~ .slist .slist__append {
+  .sub-navigation ~ .slist .slist__append {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
diff --git a/app/styles/components/timeline-queue-header.scss b/app/styles/components/timeline-queue-header.scss
index da3c6b65e..93cf73d6f 100644
--- a/app/styles/components/timeline-queue-header.scss
+++ b/app/styles/components/timeline-queue-header.scss
@@ -15,7 +15,7 @@
   padding: 0 10px;
   z-index: 500;
 
-  .sub-navigation:not(.sub-navigation--hidden) ~ & {
+  .sub-navigation ~ & {
     top: calc(60px + 41px);
   }
 
diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss
index 367cab868..b76e7a6e4 100644
--- a/app/styles/components/wtf-panel.scss
+++ b/app/styles/components/wtf-panel.scss
@@ -162,7 +162,7 @@
   }
 }
 
-.column .sub-navigation:not(.sub-navigation--hidden) ~ .wtf-panel {
+.column .sub-navigation ~ .wtf-panel {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index f097876cc..9a8a48a44 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -128,22 +128,11 @@
   align-items: center;
   justify-content: center;
   z-index: 999;
-  transition: transform 0.2s, border-radius 0.2s;
 
-  &--sticking {
+  &--scrolled {
     border-radius: 0 !important;
   }
 
-  &--show-after {
-    transform: translateY(-41px) scaleY(0);
-    margin-top: -1041px;
-    margin-bottom: 1000px;
-
-    &.sub-navigation--visible {
-      transform: translateY(0) scaleY(1);
-    }
-  }
-
   &__content {
     width: 100%;
     height: 100%;
@@ -181,7 +170,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: auto;
 
     .svg-icon {
       width: 20px;
@@ -194,7 +182,3 @@
     border-top-right-radius: 10px;
   }
 }
-
-.home-timeline .sub-navigation__back {
-  display: none;
-}