full width, several columns off-screen menu

Hi Fabien,

This is pretty tricky to do as I don't fully understand how you want it laid out.

Can you make a mockup image of how exactly do you want the off-canvas menu to be laid out?

Do you want the submenus to be automatically expanded?

I’m trying to get a different off-canvas layout on desktop. The mobile version works well and I can get it to show full-screen on desktop, however the content is centered in a narrow column…

We can address the narrowness of the content container for desktop by overriding what's causing it:

.slideout-navigation.do-overlay .inside-navigation {
    display: flex;
    flex-direction: column;
    padding: 10% 10% 0;
    max-width: 700px;
}

Particularly, the max-width. We can change the value to 100% by writing a more specific css selector to win in precedence.

Example:

nav#generate-slideout-menu .inside-navigation.grid-container.grid-parent {max-width: 100%;padding: 5% 10px 10px 10px;}

I’m also looking to get a search widget at the top. At the moment the widget shows below the menu that’s assigned to ‘off-canvas’ for some reason.

Add this CSS so the order is swapped between the menu items and the search widget.

#generate-slideout-menu aside#search-4 {
    order: 0;
}
#generate-slideout-menu .main-nav {
    order: 1;
}

Note: if you're aiming for something like this - https://share.getcloudapp.com/7KuovKPl

Here's a CSS:

@media(min-width:769px){
#generate-slideout-menu aside#search-4 {
    order: 0;
}

#generate-slideout-menu .main-nav {
    order: 1;
}

nav#generate-slideout-menu .inside-navigation.grid-container.grid-parent {
    max-width: 100%;
    padding: 5% 10px 10px 10px;
}

ul#menu-off-canvas-menu {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

#generate-slideout-menu .slideout-menu > li:not(:first-child,.slideoutmenu-highlight-button) {
    width: 25%;
}

#generate-slideout-menu .slideout-menu > li:first-child {
    width: 100%;
}

#generate-slideout-menu .slideout-menu > li.slideoutmenu-highlight-button{
    width: 25%;  
    margin:0 !important;
    padding: 0 !important;
}

#generate-slideout-menu .slideout-menu > li.slideoutmenu-highlight-button{
    width: 25%;  
}

#generate-slideout-menu .slideout-menu ul.sub-menu, 
#generate-slideout-menu .slideout-menu ul.sub-menu li {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    position: static !important;
    left: unset;
    opacity: 1;
    height: auto;
    background-color: transparent !important;
}

#generate-slideout-menu .slideout-menu li{
    text-align: left !important; 
}

#generate-slideout-menu .slideout-menu ul.sub-menu li a, 
#generate-slideout-menu .slideout-menu li a  {
    margin: 0;
    padding: 0 !important;
}

#generate-slideout-menu .slideout-menu > li.slideoutmenu-highlight-button a{
    width: 25%;  
    margin:0 0 10px 0 !important;
}

#generate-slideout-menu .slideout-menu > li:not(.slideoutmenu-highlight-button) > a {
    line-height: 1;
    margin-bottom: 10px !important;
}
}

Hi Elvin, wow some awesome ideas there!

I'm just struggling with the logic of the colour scheme for submenus and can't figure out what triggers the variations? Can you try the hamburger menu and let me know how to keep the same colour throughout?

The mobile view is also now giving me a very narrow column... how to make this 90% width on mobile view?

I’m just struggling with the logic of the colour scheme for submenus and can’t figure out what triggers the variations? Can you try the hamburger menu and let me know how to keep the same colour throughout?

You have this CSS:

.dropdown-click .main-navigation .main-nav > ul > li > .sub-menu:after {
    content: "";
    display: block;
    height: 300%;
    width: 100%;
    position: absolute;
    top: 100%;
    background: rgba(0,0,0,0.5);
}

The pseudo element's background is overflowing to the items beneath it.

The mobile view is also now giving me a very narrow column… how to make this 90% width on mobile view?

I'm not sure the same layout will fit because of the viewport's horizontal constraints. That's why CSS was intentionally written for small tablets and desktops. I've added a @media rule to it.

You can remove the wrapping @media rule so it applies to all viewports.

oh great that is so helpful! I will find a workaround for the mobile version...

Lastly, the search results seem to be hidden behind the menu (as the same search box works elsewhere on the site with results dropping down at the back). How can I play around with z-index to have the search results show up top (either bring them to front of push the menu overlay to the back)?

Lastly, the search results seem to be hidden behind the menu (as the same search box works elsewhere on the site with results dropping down at the back). How can I play around with z-index to have the search results show up top (either bring them to front of push the menu overlay to the back)?

Not sure I see what you mean. Can you point me to a sample occurrence so I can inspect it?

if you click on the hamburger menu on desktop it should open the off-screen menu. If you try a search (anything, say 'visa') it seems to be loading nothing. But rather, I suspect the dropdown search results list is showing behind the menu. If I insert the same search menu elsewhere on the site (on a normal page) the dropdown search results appear fine. Therefore I suspect a z-index issue.

Hi there,

try adding this CSS:

#ajaxsearchprores1_1 {
    z-index: 1000000;
}

works a treat thanks !:)

Glad to hear that