Hello,
We didn’t end up using this code, but I thought it might be helpful to others. It turns your hamburger menu into a 3 column “mega menu” top center using CSS-flexbox columns. It also makes the topbar “fat” plus a few other tweaks.
Enjoy!
Before:
After:
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div > div.user-menu-container > div {
background: url(https://cdn5.dcbstatic.com/files/i/m/impactnetworking_docebosaas_com/userfiles/13045/learn.gif) no-repeat center;
background-size: contain;
position: relative;
}/*grow explore connect in hamburger popup*/
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div > div.user-menu-container > div > div.user-menu-details-top-wrapper > div > ui-button-link > button {
visibility: hidden !important;
display: none !important;
}/*no signout in hamburger*/
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div > div.user-menu-container > div > div.user-menu-details-bottom-wrapper > div {
visibility: hidden !important;
display: none !important;
}/*no username in hamburger*/
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div > div.user-menu-container > div > div.user-menu-details-bottom-wrapper > ui-button-icon {
visibility: visible !important;
display: block !important;
}/*no edit profile button in hamburger*/
#doc-layout-header-fixed > div.doc-layout-overlay.is-visible {
opacity: 30% !important;
}/*UXUI opacity when menu is open*/
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div > div.user-menu-container > nav > ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div > div.user-menu-container > div {
height: 3em;
}
/* visibility: hidden !important;
display: none !important;
}/*hide top red in hamburger popup; note this hides the logout link*/
#doc-widget-45 > myprofile-widget > div > div > div.cover {
background-color: transparent !important;
}/*hide top red in hamburger popup*/
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div > div.user-menu-container > div > div.user-menu-details-top-wrapper > ui-avatar {
visibility: hidden !important;
display: none !important;
}/*hide avatar in hamburger popup*/
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div > div.user-menu-header{
visibility: hidden !important;
display: none !important;
}/*no header in hamburger*/
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div > div.user-menu-footer-wrapper.ng-star-inserted {
visibility: hidden !important;
display: none !important;
}/*no footer in hamburger*/
/*#doc-layout-user-menu > div.user-menu-wrapper.ui-shadow-md.user-menu-open*/
#doc-layout-user-menu > dcb-ui-trap > div > div > div:nth-child(2) > div.user-menu-open{
margin-top: 6em;
margin-left: 15%;
margin-right: 15%;
margin-bottom: 15%;
width: 70%;
height: fit-content;
}/*larger hamburger when opened - and centered please!*/
#ui-button-icon-2 {
background: url(https://cdn5.dcbstatic.com/files/i/m/impactnetworking_docebosaas_com/userfiles/13045/growexploreconnect_alphatest__1_.png) no-repeat center;
background-size: contain;
position: relative;
width: 500px !important;
height: 5.5em !important;
margin-left: 4em;
margin-right: 1em;
}/*hamburger button image swap*/
#ui-button-icon-2 > ui-icon > span > svg {
visibility: hidden;
}/*hide default hamburger button*/
#doc-layout-internal-header > div.internal-header-main-elements > div.internal-header-logo > a > img {
max-height: 200%;
}/*larger home button image (impact logo)*/
/*gold gamification icon*/
.internal-header-gamification ui-button-icon button ui-icon span.color-neutral svg {fill: #FFD700;}
/*blue robot icon*/
.internal-header-virtual-coach ui-button-icon button ui-icon span.color-neutral svg {fill: #ff0000;}
ui-icon.ui-icon-size-sm {
transform: scale(2);
}/*larger header icons*/
div.global-search-boxed-wrapper ui-icon span.color-negative svg {
/*fill: white;*/
transform: scale(1.3);
}/*larger search icon*/
#doc-layout-global-search-boxed > div > div.global-search-boxed-form > div.global-search-boxed-input {
font-size: 160%;
}/*larger searchbox font*/
#doc-layout-header-fixed, #doc-layout-header-bar, #doc-layout-internal-header {
height: 6em !important;
background-color: #fefefe;
}/*taller header*/
#doc-layout-internal-header > div.internal-header-main-elements {
flex-direction: row-reverse;
}/*home button to left of grow-connect-explore*/
/*#doc-layout-page-content > doc-layout-legacy-wrapper > div > */
ui-spinner > div > div.ui-spinner-layer, div.hyd-spinner-layer {
/*border-style: hidden !important;*/
border-color: transparent !important;/*hide spinner to show image*/
background-size: cover !important;
background-image: url(https://cdn5.dcbstatic.com/files/i/m/impactnetworking_docebosaas_com/userfiles/13045/40px_spinner.png);
}/*colorize and theme spinner*/
ui-spinner > div > div.ui-spinner-layer > ui-spinner-circle-clipper, div.hyd-spinner-circle-clipper {
border-color: transparent;
}/*hide spinner to show image*/
/*enrollments-list-deprecated blankslate div.blank-slate-image img{
visibility: hidden;
}
enrollments-list-deprecated blankslate div.blank-slate-image{
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/no-courses.png) no-repeat center;
background-size: contain;
position: relative;
}/*sample code to reskin no enrollments blankslate*/
#content > div.authoring_wrap.en > h1::after {
content: " - special characters in filenames may cause errors";
}/*warning for slide converter*/
#doc-layout-title-bar {
visibility: hidden !important;
display: none !important;
}/* hide titlebars*/
#doc-layout-breadcrumbs {
visibility: hidden !important;
display: none !important;
}/* hide breadcrumb*/
#action-buttons-id {
margin-top: 2em;
}/*move circle buttons downward so they aren't hidden by header*/
#doc-widget-45 > myprofile-widget > div > div > div.cover > div > div.details-container > div.fullName {
margin-top: -1em;
margin-left: 1em;
color: #0D0C0C;
font-family: "Bebas Neue Pro", sans-serif;
font-size: 9.875rem;
font-weight: 700;
text-transform: uppercase;
}
#doc-widget-45 > myprofile-widget > div > div > div.cover > div > div.avatar-container {
margin-top: -600;
}/* move name north on homepage*/
#doc-widget-45 > myprofile-widget > div > div > div.widget-actions-container, #doc-widget-45 > myprofile-widget > div > div > div.cover > div > div.avatar-container > avatar {
visibility: hidden !important;
display: none !important;
}/*hide avatar and more actions*/
#doc-widget-45 {
margin-bottom: 0;
height: 0;
}
/*hide white signin footer
footer.doc-layout-footer { display: none !important; }*/
/*
#vertical-tab-contentPartnersApp {
visibility: hidden;
display: none;
} /*hide content partners tab for users*/
.container {
width: 90%;
}/*make legacy pages wider - less white space on sides*/
div#admin_menu_main_div div.mdl-grid div.right-panel {
margin-top:5px !important;
}/*fix misaligned headers on admin menu*/
/*
div#admin_menu_main_div div.buttons-row div.admin-menu_wrap_btn-container span.rectangular-button-text span.icon-button {
visibility: hidden;
}/*hide the icon buttons for the three top buttons in admin menu*/
.docebo-progress {
transform: scaleY(4.0);
}/*fat progress bar*/
/*
.mdl-button {
text-transform: none;
transform: scale(1.1);
}/*get rid of mandatory uppercase for all buttons*/
/*ui-spinner > div > div.ui-spinner-layer, div.hyd-spinner-layer {
border-color: transparent !important;/*hide spinner to show image*/
/*background-size: cover !important;
background-image: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/logo40px.png);
}/*colorize and theme spinner*/
/*ui-spinner > div > div.ui-spinner-layer > ui-spinner-circle-clipper, div.hyd-spinner-circle-clipper {
border-color: transparent;
}/*hide spinner to show image*/
i.material-icons{
font-size: 30px !important;
top: -5px;
left: -5px;
}/*bigger icons*/
interesting, thanks
Thank you
Hmm. Just adding for folks who might be considering, be careful here. Some accessibility issues come to mind doing a setup like this.
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.