Hiding the toolbar in a v8 theme

One thing I often do in a portal theme is to hide the upper navigation bar, so that it is only visible when you mouseover.

This is the content spot that renders the navigation in question:

<a rel="dynamic-content" href="dyn-cs:id:80theme_topNav"></a>

The classes below work for an upper navigation bar that’s wrapped in a div with a class called “wpThemeHeader”.

This selector is the main toolbar class:

.wpThemeHeader {
background-color: #333; <<– the border appears as a thin line of this colour in normal rendering.
border-bottom: 1px solid #111111;  <<– this is optional, it appears when the border is minimized.
    height: 44px;
    margin-top: -41px; <<– Better to do this than to set the height to 3px, because of the transition; if you do the height then the button bar doesn’t slide in smoothly.
overflow: hidden;
text-align: left;
transition: margin-top 0.3s ease 0s; <<–The transition controls how long it takes for the bar to appear
padding: 5px 0;
font: 75%/1.5 Arial,Helvetica,sans-serif;
}

This selector makes the header appear when you mouse over in view mode.

.wpThemeHeader:hover {
    margin-top: 0;

This selector makes the header appear as normal when you put the Portal in Edit mode. This is needed because otherwise modal dialogs for editing parameters etc are displaced.

.edit-mode .wpThemeHeader { 
margin-top: 0;
}

Advertisements

One thought on “Hiding the toolbar in a v8 theme

  1. Regret that I have not found your blog before! I was struggling with WCM and CTC for quite a while… But why do you want to hide the top bar, the middle one with View/Edit more and user name is useless for most of the people. It was better in WP 7 I believe.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s