Monday, March 4, 2019

Text behind the icon without having to reach for the hamburger menu at the top in oracle apex

First collapse the sidebar manually

Here's how to achieve that using CSS only.

.js-navCollapsed .t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content.is-hover .a-TreeView-label {
visibility: visible;
left: 48px;
padding: 0 16px;
width: auto; 
background-color: #0459a1; /* This would be your primary color */
}

.apex-side-nav.js-navCollapsed .t-Body-nav
, .apex-side-nav.js-navCollapsed .t-Body-nav .t-TreeNav {
    z-index: 999; /* Make it appear on top of the page content */
}

it's not perfect on mobile, but it's still a nice trick for desktop.

No comments:

Post a Comment

 https://www.linkedin.com/pulse/building-real-time-database-monitoring-dashboard-oracle-khaleeq-tpwxf/