Skip to main content

Free CSS: Three column hamburger menu as a "mega menu"


lrodman
Guide II
Forum|alt.badge.img+6

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:

 

Did this post help you find an answer to your question?

4 replies

lrodman
Guide II
Forum|alt.badge.img+6
  • Author
  • Guide II
  • 908 replies
  • October 24, 2023
#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*/

 


lrnlab
Hero III
Forum|alt.badge.img+8
  • Hero III
  • 4788 replies
  • October 24, 2023

interesting, thanks 


Isram
Influencer III
Forum|alt.badge.img
  • Influencer III
  • 55 replies
  • October 25, 2023

Thank you


Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • 3582 replies
  • November 3, 2023

Hmm. Just adding for folks who might be considering, be careful here. Some accessibility issues come to mind doing a setup like this.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings