-
Hi, I’ve been asked to create a menu similar to the one here. I’m using GP Premium and GB Pro.
- Animated hamburger top left to open the menu (I’m aware of the documentation for that, just not sure which menu type to go with).
- On desktop/tablet it has a dropdown menu (appearing below the header, ideally not displacing the content), but with flyout submenus (only one level of submenu items in this case).
- One mobile/smaller screens the submenus become vertical dropdowns.
Is this possible with GP? What would be the best approach?
Everything’s .local just now.
TIA
-
Hi there,
A menu like this would be quite complicated to achieve, I don’t think GB or GP has built-in functions for this, unfortunately!
It will require a custom solution, including custom JS and CSS.
-
OK, I thought that might be the case. Fair enough.
1. Is it possible that the next version of GB, with custom menu functionality, would be able to get close? I’ve been playing with rc1 and one of the templates (Header 9, or Header 11 I think, set to partial overlay) allows for something not 100 miles off what they’re wanting after a bit of CSS wrangling. I guess I’d have to ask again once that’s been released and is actively supported?
2. Would it be possible to attempt some sort of compromise in the meantime using an off-canvas slide-in (left) menu, at all widths? I could forget the animated hamburger and I think I can sort out positioning so it would appear under the header, and in such a way that the close icon would be in the same position as the hamburger when the menu is open.
The only thing then would be to get the submenus (only one level deep) to fly out to the right of the relevant parent menu item on desktop only – this is also the one thing I would need for the rc1 version, which otherwise is pretty close, and the flyout submenus are the feature that is most required.
I’ve kind of hacked the CSS in the browser to do that but I’m not certain I’m doing it the right way (set the off-canvas overflow to visible, relatively position the submenus to appear to the right, set the parent menu item to a fixed height to remove the gap where the submenu items were, all to be desktop only).
Is there a best practice way to do this?
-
1. The GB Pro plugin has been released, you can use the site header/navigation blocks now to build a custom header.
2. You can set the off canvas menu to on at customizer > layout > off canvas panel. And use a button in your custom header, add
slideout-toggleclass to the button, so it can open/close the off canvas menu.Here’s an example:
<!-- wp:generateblocks-pro/site-header {"uniqueId":"f026d1e5","styles":{"paddingTop":"1rem","paddingBottom":"1rem","paddingRight":"40px","paddingLeft":"40px","@media (max-width:1024px)":{"paddingRight":"30px","paddingLeft":"30px"},"@media (max-width:767px)":{"paddingRight":"20px","paddingLeft":"20px"},"backgroundColor":"#ffffff"},"css":".gb-site-header-f026d1e5{background-color:#ffffff;padding:1rem 40px}@media (max-width:1024px){.gb-site-header-f026d1e5{padding-left:30px;padding-right:30px}}@media (max-width:767px){.gb-site-header-f026d1e5{padding-left:20px;padding-right:20px}}","tagName":"header"} --> <header class="gb-site-header gb-site-header-f026d1e5"><!-- wp:generateblocks/text {"uniqueId":"bfce25f4","tagName":"a","styles":{"display":"inline-flex","alignItems":"center","backgroundColor":"#215bc2","color":"#ffffff","paddingTop":"1rem","paddingRight":"2rem","paddingBottom":"1rem","paddingLeft":"2rem","textDecoration":"none","\u0026:is(:hover, :focus)":{"backgroundColor":"#1a4a9b","color":"#ffffff"},"columnGap":"0.5em",".gb-shape svg":{"width":"1em","height":"1em","fill":"currentColor"}},"css":".gb-text-bfce25f4{align-items:center;background-color:#215bc2;color:#ffffff;column-gap:0.5em;display:inline-flex;text-decoration:none;padding:1rem 2rem}.gb-text-bfce25f4:is(:hover,:focus){background-color:#1a4a9b;color:#ffffff}.gb-text-bfce25f4 .gb-shape svg{width:1em;height:1em;fill:currentColor}","iconOnly":true,"className":"slideout-toggle"} --> <a class="gb-text-bfce25f4 slideout-toggle"><span class="gb-shape"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></a> <!-- /wp:generateblocks/text --> <!-- wp:generateblocks/text {"uniqueId":"4457cd29","tagName":"a","styles":{"display":"inline-flex","alignItems":"center","backgroundColor":"#215bc2","color":"#ffffff","paddingTop":"1rem","paddingRight":"2rem","paddingBottom":"1rem","paddingLeft":"2rem","textDecoration":"none","\u0026:is(:hover, :focus)":{"backgroundColor":"#1a4a9b","color":"#ffffff"},"columnGap":"0.5em",".gb-shape svg":{"width":"1em","height":"1em","fill":"currentColor"}},"css":".gb-text-4457cd29{align-items:center;background-color:#215bc2;color:#ffffff;column-gap:0.5em;display:inline-flex;text-decoration:none;padding:1rem 2rem}.gb-text-4457cd29:is(:hover,:focus){background-color:#1a4a9b;color:#ffffff}.gb-text-4457cd29 .gb-shape svg{width:1em;height:1em;fill:currentColor}","iconOnly":true,"className":"slideout-toggle"} --> <a class="gb-text-4457cd29 slideout-toggle"><span class="gb-shape"><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path></svg></span></a> <!-- /wp:generateblocks/text --></header> <!-- /wp:generateblocks-pro/site-header -->And add this CSS:
body.slide-opened .slideout-toggle:first-child, body:not(.slide-opened) .slideout-toggle:last-child { display: none; }3. You will need to use CSS to make the sub menu to show on the right side of the parent menu items in the off canvas menu.
-
Hi again
I’m back to wrestling with this again. I’ve managed to get something close using GB Pro 2.0 and Header 12 (if I remember correctly) from the library – a left-aligned hamburger which opens the menu underneath the header.
However, I’m stuck on various points and would really appreciate some help. The site is local currently but I’ve taken some screenshots and mocked them up to show what I’m trying to do.
I’m using a partial overlay mobile menu, set to kick in at 9999px to be present at all widths, and theoretically set to anchor underneath the header (initially it was set to auto-detect but I’ve since set it to .gb-site-header). Thing is, it’s fixed position and doesn’t scroll with the page – doesn’t seem to be anchored – and I’m not sure how to fix it.
Also I need the submenus to fly out from the right on desktop and tablet (not achieved yet), and be vertical on mobile (under 768px), which it already is. I have some CSS which places the submenu to the right but the space underneath the parent item remains i.e. a huge gap between that and the next main menu item. How should I achieve what I need here?
Here’s what I’m aiming to achieve:
And here are the settings:
I’m happy to start again if there’s a better way to get what I’m after. It’s so close I don’t want to give up and revert to a standard off-canvas menu.
TIA.
-
Hi there,
Try this for the navigation block:
<!-- wp:generateblocks-pro/navigation {"uniqueId":"e58fac2a","styles":{"width":"fit-content","overflowX":"visible","overflowY":"visible",":where(.gb-menu-container\u002d\u002dmobile) .gb-menu\u002d\u002dbase .gb-sub-menu":{"position":"absolute"}},"css":".gb-navigation-e58fac2a{overflow-x:visible;overflow-y:visible;width:fit-content}.gb-navigation-e58fac2a :where(.gb-menu-container\u002d\u002dmobile) .gb-menu\u002d\u002dbase .gb-sub-menu{position:absolute}","tagName":"nav","htmlAttributes":{"data-gb-mobile-breakpoint":"999999999px","data-gb-mobile-menu-type":"partial-overlay","data-gb-menu-toggle-anchor":".gb-site-header"}} --> <nav class="gb-navigation gb-navigation-e58fac2a" data-gb-mobile-breakpoint="999999999px" data-gb-mobile-menu-type="partial-overlay" data-gb-menu-toggle-anchor=".gb-site-header"><!-- wp:generateblocks-pro/menu-toggle {"uniqueId":"2f639e6c","styles":{"display":"flex","alignItems":"center","columnGap":"5px","backgroundColor":"#000000","color":"#ffffff","paddingTop":"10px","paddingRight":"10px","paddingBottom":"10px","paddingLeft":"10px","zIndex":"2","svg":{"width":"25px","height":"25px","fill":"currentColor"}},"css":".gb-menu-toggle-2f639e6c{align-items:center;background-color:#000000;color:#ffffff;column-gap:5px;display:flex;z-index:2;padding:10px}.gb-menu-toggle-2f639e6c svg{width:25px;height:25px;fill:currentColor}","tagName":"button","iconOnly":true} --> <button class="gb-menu-toggle gb-menu-toggle-2f639e6c"><span class="gb-menu-open-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="40" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="40" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg></span><span class="gb-menu-close-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg></span></button> <!-- /wp:generateblocks-pro/menu-toggle --> <!-- wp:generateblocks-pro/menu-container {"uniqueId":"41a3000f","styles":{"\u0026.gb-menu-container\u002d\u002dmobile":{"backgroundColor":"#000000","color":"#ffffff","paddingBottom":"60px","position":"fixed"},"\u0026.gb-menu-container\u002d\u002dmobile .gb-menu":{"flexDirection":"column"},"width":"250px","overflowX":"visible","overflowY":"visible"},"css":".gb-menu-container-41a3000f{overflow-x:visible;overflow-y:visible;width:250px}.gb-menu-container-41a3000f.gb-menu-container\u002d\u002dmobile{background-color:#000000;color:#ffffff;padding-bottom:60px;position:fixed}.gb-menu-container-41a3000f.gb-menu-container\u002d\u002dmobile .gb-menu{flex-direction:column}","tagName":"div"} --> <div class="gb-menu-container gb-menu-container-41a3000f"><!-- wp:generateblocks-pro/classic-menu {"menu":"60","uniqueId":"334b77f4","styles":{"paddingTop":"0px","paddingRight":"0px","paddingBottom":"0px","paddingLeft":"0px","marginTop":"0px","marginRight":"0px","marginBottom":"0px","marginLeft":"0px","display":"flex","listStyleType":"none","width":"100%","flexDirection":"row"},"css":".gb-menu-334b77f4{display:flex;flex-direction:row;list-style-type:none;width:100%;margin:0px;padding:0px}"} --> <!-- wp:generateblocks-pro/classic-menu-item {"uniqueId":"mi4b77f4","styles":{"position":"relative","paddingTop":"0px","paddingRight":"0px","paddingBottom":"0px","paddingLeft":"0px","marginTop":"0px","marginRight":"0px","marginBottom":"0px","marginLeft":"0px","listStyleType":"none",".gb-menu-link":{"display":"flex","justifyContent":"space-between","alignItems":"center","textDecoration":"none","columnGap":"10px","paddingTop":"1em","paddingBottom":"1em","paddingLeft":"20px","paddingRight":"20px"},"width":"100%"},"css":".gb-menu-item-mi4b77f4{list-style-type:none;position:relative;width:100%;margin:0px;padding:0px}.gb-menu-item-mi4b77f4 .gb-menu-link{display:flex;justify-content:space-between;align-items:center;text-decoration:none;column-gap:10px;padding:1em 20px}"} /--> <!-- wp:generateblocks-pro/classic-sub-menu {"uniqueId":"sm4b77f4","styles":{"width":"200px","paddingTop":"0px","paddingRight":"0px","paddingBottom":"0px","paddingLeft":"0px","marginTop":"0px","marginRight":"0px","marginBottom":"0px","marginLeft":"0px","right":"0px","zIndex":"100",".menu-item":{"backgroundColor":"#000000","color":"#ffffff"},".gb-sub-menu":{"top":"0px","right":"100%"},"left":"100%"},"css":".gb-sub-menu-sm4b77f4{left:100%;right:0px;width:200px;z-index:100;margin:0px;padding:0px}.gb-sub-menu-sm4b77f4 .gb-sub-menu{top:0px;right:100%}.gb-sub-menu-sm4b77f4 .menu-item{background-color:#000000;color:#ffffff}"} /--> <!-- /wp:generateblocks-pro/classic-menu --></div> <!-- /wp:generateblocks-pro/menu-container --></nav> <!-- /wp:generateblocks-pro/navigation --> -
OK I think I managed to translate the CSS into settings but it’s not really working, and I’m not sure I’m getting the settings correct when reading them from source.
The menu was fixed where it needs to scroll with the page, anchored to the header, so I’ve changed that to absolute and it now scrolls.
The parent items are still taking up the vertical space of the submenu, though it’s now vertically centered in that space, and the submenu is far from the main menu (large gap between). Probably I’ve got something wrong.
Rather than source code could you possibly list out which settings need to be what? Or screenshot them maybe? Thanks.
-
OK I think I managed to translate the CSS into settings but it’s not really working, and I’m not sure I’m getting the settings correct when reading them from source.
You can copy the code and paste it in to your site header block. It’s a navigation block that I’ve already have all the styles set up.
If you don’t know how to copy/paste blocks, please check this video:
-
Ha, well that’s embarrassing. When I opened my eyes this morning, the first thought I had was that I’d completely misunderstood what the code block was and that it was copy/pastable, though I’ve not copied/pasted content in this way before, I usually only copy blocks directly.
However, if I edit a navigation block as HTML and replace the source with your code, it’s coming up as invalid content when I switch back to visual editing and then reverting back to how it was originally after attempting recovery.
-
I hope my navigation block is working 🙂
Let me know if you need further assistance!
-
Did you see my reply? The code comes up as invalid so I can’t see if it works, every time I paste it in as HTML it fails when I go to visual.
-
Hi Jem,
Do not edit the existing Navigation block, as that will definitely cause a break.
A better approach would be to open a new draft page and paste the block markup provided by Ying.
Once the block is pasted, copy it and replace the existing Navigation block inside your Site Header block with this new one.
-
Thanks for that. It’s still not working though. If I create a draft page, add a navigation block, edit it as HTML and paste in the code, it comes up as invalid and won’t save.
If I add a Custom HTML block and paste the code, then preview the page, I get a navigation block on the front end but it’s not an editable block in admin.
If I create a header element, select the navigation block, edit it as HTML and paste the code, it again comes up invalid and won’t save. If I replace the navigation block with a Custom HTML block and paste the code, I get a navigation block. It is positioned as if anchored to the header but it’s fixed and doesn’t scroll with the page (fixed by making the menu container position: absolute, rather than position: fixed), and the submenus fly out next to the parent item underneath the one which was clicked (fixed by adding top: 0; to the submenu).
So as it stands we’re really close with the way the block works, but I can’t properly replace the current navigation block with the code provided and end up with an editable navigation block as the code comes up as invalid and won’t save. Is there something specific about how I should paste this code?
Perhaps you could outline which settings were applied in the nav block so I can replicate the steps, starting from scratch?
Alternatively I have a blank starter site set up on a server – admin access link in private info – if that’s easier. It has a header element based on Header 12 from the Pattern Library, which is what I’m basing the header for the actual site in question on as I have a button and some icons to the right in the header.
Thanks so much and sorry for the runaround.
-
If I create a draft page, add a navigation block, edit it as HTML and paste in the code, it comes up as invalid and won’t save.
Not edit as HTML but set the editor to code mode. I bet you didn’t watch the video I sent to you.
I’ve added the navigation block to your site header element, your original navigation block is also there, feel free to remove it.
-
Thanks Ying, I have it working on the test site now.
I actually did watch the video, Leo doesn’t mention using Code mode? He just covers copy/pasting blocks on pages and elements (which I do all the time) and using the Duplicate Page plugin. I’ve never had cause to use Code mode myself before now, after years of using GP. I tried it and replaced the elements in my header with your code but again it came up as invalid and wouldn’t save.
If I replace the various elements in my header with yours directly (via the Document Overview, duplicating and moving) the layout breaks, I guess due to the other elements in my header. So I stepped through everything and replicated your settings in my header, and I applied the submenu positioning only for desktop so the submenu reverts to a vertical dropdown on mobile.
As I say, the submenu item needs top:0 to line up properly with the parent, and the menu container needs position: absolute (rather than fixed) to scroll with the page. FYI the menu from Header 12 in the pattern library also does not scroll with the page.
Anyway I think that’s sorted now, though I still have to apply this to the actual site so I may be back, but hopefully not.
I really appreciate the help, and your patience.
-
Anyway I think that’s sorted now, though I still have to apply this to the actual site so I may be back, but hopefully not.
Hope everything works out 🙂
- You must be logged in to reply to this topic.