APEX and Universal theme Navigation bar list

APEX and Universal theme Navigation bar list

 

Navigation bar list CSS tip

Menu enhancement

For past few weeks I worked on APEX public facing application where one of the key design points was of course the need to match the existing company website UI (or at least as closely).

Luckily all of this was possible just by lightly tweaking Universal theme adding few custom report templates and rest was result of CSS magic.

To come to the point of this post - while polishing the look and feel for mobile devices something we picked up that I wanted to share here. 

If you happen to use Navigation bar list you will notice that as you minimize your screen at some point your items turn into icons and all text only navigation bar list item disappear. 

This is great as it shows responsiveness of UT. But what if you want to keep icons and text items. I know that having a smaller icon is recommended but in my case simply client did not want to use icons. 

Notice how only item with icon stays on after reaching certain screen size. 

To adjust this all we need is a little of CSS. 

<style>

.t-NavigationBar:before{

    cursor: pointer;

    border: 1px solid black;

    border-radius: 2px;  

    marxin-top:-2px;

    padding:5px;   

    content: "\e015";

    font-size: 16px;

    font-family: apex-5-icon-font!important;

    font-style: normal!important;

    font-weight: 400!important;

    font-variant: normal!important;

    text-transform: none!important;

    speak: none;

    line-height: 1;

    -webkit-font-smoothing: antialiased;   

    display: none;

}

@media only screen and (max-width: 640px){

    .t-Button--navBar .t-Button-label {

        display: inherit;

        font-size: 1rem;

    }

    .t-NavigationBar{

        position:fixed;

        z-index: 1000;

        top:5px;

        right:0;     

        background-color: #2578cf;  /*#ffffff;*/

       

    }

    .t-NavigationBar li{

        text-align:left;

    }

    .t-NavigationBar-item {

        display:none;

    }

    .t-NavigationBar:before{

        display:inline-block;

    }

    .t-NavigationBar:hover .t-NavigationBar-item,

    .t-NavigationBar:focus .t-NavigationBar-item{

        display:inherit;

    }

}

</style>

All that is left is adjust background color and icon you want to use.

Please note that in this example demo application uses both Navigation menu and Navigation bar. 

Live demo.

Happy APEXing,
Lino