Apex 5 Universal Theme – Navigation Experiment #3

Decreasing the size of the side navigation menu

In one project we already used a tree based menu. After migration to Apex5 and Universal Theme, this menu was way larger than before. Especially after applying the “keep two menu” hierarchies open change (i blog about that later), I decided to play a bit with the theme roller settings and try decrease the height for each menu entry.

Here is the result. if you add the following css to your theme, the height of the typical menu item will decrease from 40px to 30px.


.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-row,
.t-TreeNav .a-TreeView-node--topLevel  .a-TreeView-label,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-toggle,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content,
.t-TreeNav .a-TreeView-node--topLevel  .a-TreeView-content .fa {
height: 30px;
line-height: 30px;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .a-TreeView-label {
line-height: 30px;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-toggle {
padding: 0px;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .fa {
padding: 0px 9px 8px 13px;
}

.t-TreeNav .a-TreeView-node--topLevel > ul > .a-TreeView-node {
padding-left: 32px; padding-top: 0px; padding-bottom: 0px;
}

.t-TreeNav .a-TreeView-node--topLevel ul .a-TreeView-content {
line-height: 0px;
}

Don’t get hilarious by the nice green color. This was just me experimenting. The css will not change your color settings.

before/after: apex5_sidebar_decrease_beforeapex5_sidebar_decrease_after

As you can see the total size decreases considerably while maintaining font sizes.

I did only change the top level entries, since they take up the most space. The sub level entries where just alined a little bit to the right. So that they match their main entries better. This depends also upon having icons or not in the sub entry.

One place where you can add the css is the custom section of the theme roller.

apex5_sidebar_decrease_TR  Simply copy and paste it there and see the change immediatly in your application.

Overview about other Experiments

Advertisements

One thought on “Apex 5 Universal Theme – Navigation Experiment #3

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