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:

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.

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

Overview about other Experiments

Advertisements