2

I’ve got a limited knowledge of CSS. What I know I've learned while programming. That said, I’m working with the Twenty-Twenty-Two theme. I’m trying to add a mega-menu to my child theme. The Twenty-Twenty-Two theme is interesting in that it is not using HTML tags with its navigation CSS. As I see it, this will allow the designers to use either ul or div tags to define the menu. I have gotten it to the following:

Screen Shot

I define the mega menu via a single CSS class of gc-is-mega-sub-menu on the main menu item (li). I’m developing the CSS in a stand-alone web page via extracting the required CSS and JavaScript.

I looked at Fast & Easy WordPress Mega Menu without Plugins and also An Easy Way to Code a Mega Menu in WordPress

I’m not happy with the appearance. The line containing The Seasons is essentially width of 100% and results in an annoying extension bump out. That line also has a border notch after the last item.

Ideally, I would like a visible border around the entire mega-menu. It would be great if the border was a regular rectangle, not an irregular form. Any suggestion would be appreciated.

You can search for 'mega-menu CSS' for the specific add-on code for the mega menu. I just paste that small block of CSS into my child theme's style.css. Sadly, the body of a message is limited to 30000 characters, so I was not able to paste the total example into StackExchange. The code is the development code, minus the the following:

  • wp-content/themes/twentytwentytwo/style.css
  • wp-include/blocks/navigation/style.css
  • wp-include/blocks/navigation/view.js.

Or, I have created a version of the mega-menu on StackBlitz

<html>
 <head><title>Mega-Menu Development</title></head>

<style type='text/css'>
:root {
  --wp--style--block-gap: 1.5rem;
  --wp--preset--font-size--normal: 16px;
  --wp--preset--font-size--huge: 42px;
  --wp--preset--color--primary: #005a87;
  --wp--preset--color--background: lightyellow;
  --wp--preset--font-size--medium: 14px;
  --wp--custom--spacing--large: 5px;
  --wp--custom--spacing--outer: 1px;
}
body {
  font-size: 1.5rem;
  background-color: #fff;
}
 </style>

<style>.wp-container-2 {display: flex; gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;align-items: left;justify-content: flex-end;}.wp-container-2 > * { margin: 0; }</style>
<style>.wp-container-3 {display: flex; gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;align-items: left;justify-content: space-between;}.wp-container-3 > * { margin: 0; }</style>
<style>.wp-container-4 > :where(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-4 > .alignwide { max-width: 1000px;}.wp-container-4 .alignfull { max-width: none; }.wp-container-4 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-4 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-4 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.wp-container-4 > * { margin-block-start: 0; margin-block-end: 0; }.wp-container-4 > * + * { margin-block-start: var( --wp--style--block-gap ); margin-block-end: 0; }</style>

 <style type='text/css'>
  /* Insert styles from
    wp-content/themes/twentytwentytwo/style.css
    wp-include/blocks/navigation/style.css
  */
  /* 2022 WordPress Theme, (C) 2021 WordPress.org */

  /* End of 2022 WordPress Theme */

  /* wp-include/blocks/navigation/style.css */

  /* End of wp-include/blocks/navigation/style.css */

 </style>

 <style type='text/css'>
  /*
    == mega-menu CSS for 2022 theme ==
  */
  .wp-block-navigation {
    /* set the various preset values */
    --gc--mega-menu-preset--background-color: #e0e0e0;
    --gc--mega-menu-preset--border: 1px solid rgba(76,76,76,.3) !important;
    --gc--mega-menu-preset--main-row-line-height: 3.0rem;
    --gc--mega-menu-preset--row-line-height: 2.5rem;
    --gc--mega-menu-preset--column-line-height: 1.5rem;
  }
  /* = start the nav tag with relative = */
  .wp-block-navigation {
    position: relative;
    min-width: 99%; /* corrects funky notch after last top ul,
            but create a notch after 2nd ul,
            notch size based on that ul line-height */
  }
  /* = li that contains a sub-menu = */
  .wp-block-navigation-submenu {
    line-height: var(--gc--mega-menu-preset--main-row-line-height);
  }
  /* = li that contains a hidden mega sub-menu = */
  .gc-is-mega-sub-menu.wp-block-navigation-submenu {
    position: static;
  }
  /* = ul that contains the mega sub-menu = */
  .gc-is-mega-sub-menu.wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
    display: flex;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: row;
    line-height: var(--gc--mega-menu-preset--row-line-height);
    border: var(--gc--mega-menu-preset--border);
    background-color: var(--gc--mega-menu-preset--background-color);
  }
  /* = display the sub-menu column no-wrap and not bleed thru background = */
  .gc-is-mega-sub-menu.wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    white-space: nowrap;
    min-width: 180px;
  }
  /* = display the sub-sub-menu column under the sub-menu = */
  .gc-is-mega-sub-menu.wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
    display: flex;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    overflow: visible;
    flex-direction: column;
    line-height: var(--gc--mega-menu-preset--column-line-height);
    border: var(--gc--mega-menu-preset--border);
    background-color: var(--gc--mega-menu-preset--background-color);
  }
  /* = hide the > or v sub-menu icon = */
  .gc-is-mega-sub-menu.wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > button {
    visibility: hidden;
    opacity: 0;
  }
  /* = sub sub-menu li = */
  .gc-is-mega-sub-menu.wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    background: inherit;
    min-width: 180px;
  }
  /* display both ul as flex and visible if hover over gc-is-mega-sub-menu */
  .gc-is-mega-sub-menu.wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
  .gc-is-mega-sub-menu.wp-block-navigation-submenu:focus > .wp-block-navigation__submenu-container,
  .gc-is-mega-sub-menu.wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation__submenu-container,
  .gc-is-mega-sub-menu.wp-block-navigation-submenu:focus > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
    display: flex;
    visibility: visible;
    opacity: 1;
  }
  /* = responsive = */
  @media ( max-width: 600px ) {
    /* .wp-block-navigation__container, */
    .gc-is-mega-sub-menu.wp-block-navigation-submenu > .wp-block-navigation__submenu-container,
    .gc-is-mega-sub-menu.wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
      display: flex;
      position: relative;
      visibility: visible;
      opacity: 1;
      border: none;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: var(--navigation-layout-justify,initial);
      align-items: var(--navigation-layout-align,initial);
      list-style: none;
      padding-left: 0;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
      padding: 0;
      margin: 0;
    }
  }
  @media (min-width: 782px) {
    .gc-is-mega-sub-menu.wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
      left: 0;
      top: 3.3rem;
    }
  }
  /* == End of mega-menu CSS for 2022 theme == */
 
 </style>

 <body>
  <div class="wp-site-blocks">
    <header class="wp-block-template-part">
      <div class="wp-container-4 wp-elements-9a30a2619dbd3285109645359afe290a wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background has-link-color" style="padding-top:0px;padding-bottom:60px; background: #077676;">
        <div class="wp-container-3 is-content-justification-space-between wp-block-group alignwide" style="padding-top:60px;padding-bottom:45px">
          <nav class="wp-container-2 is-responsive wp-block-navigation" aria-label="Navigation"><button aria-haspopup="true" aria-label="Open menu" class="wp-block-navigation__responsive-container-open " data-micromodal-trigger="modal-1"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg></button>
            <div class="wp-block-navigation__responsive-container " id="modal-1">
              <div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close="">
                <div class="wp-block-navigation__responsive-dialog" aria-label="Menu">
                    <button aria-label="Close menu" data-micromodal-close="" class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
                  <div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
                    <ul class="wp-block-navigation__container">
                      <li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Home</span></a></li>
                      <li class="wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">About</span></a>
                        <ul class="wp-block-navigation__submenu-container">
                          <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">People</span></a></li>
                          <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Contact Us</span></a></li>
                        </ul>
                      </li>
                      <li class="wp-block-navigation-item has-child open-on-hover-click gc-is-mega-sub-menu wp-block-navigation-submenu"><a class="wp-block-navigation-item__content" href="#" title="">Everything</a><button aria-label="Everything submenu" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></button>
                        <ul class="wp-block-navigation__submenu-container">
                          <li class=" wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu"><a class="wp-block-navigation-item__content" href="#"><strong>The Seasons </strong></a><button aria-label="The Seasons submenu" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></button>
                            <ul class="wp-block-navigation__submenu-container">
                              <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Spring</span></a></li>
                              <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Summer</span></a></li>
                              <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Fall</span></a></li>
                              <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Winter</span></a></li>
                            </ul>
                          </li>
                          <li class=" wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu"><a class="wp-block-navigation-item__content" href="#"><strong>Plants &amp; Animals</strong></a><button aria-label="Plants &amp; Animals submenu" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></button>
                            <ul class="wp-block-navigation__submenu-container">
                              <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Flora</span></a></li>
                              <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Fauna</span></a></li>
                            </ul>
                          </li>
                          <li class=" wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu"><a class="wp-block-navigation-item__content" href="#"><strong>News &amp; Events</strong></a><button aria-label="News &amp; Events submenu" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></button>
                            <ul class="wp-block-navigation__submenu-container">
                              <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">News</span></a></li>
                              <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Events</span></a></li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Get Involved</span></a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </header>
    <div class='wp-container-4'>
      <h3>Content line, Content line. Content line, Content line.</h3>
      <h3>Content line, Content line. Content line, Content line.</h3>
      <h3>Content line, Content line. Content line, Content line.</h3>
      <h3>Content line, Content line. Content line, Content line.</h3>
    </div>
  </div>
</body>

<script LANGUAGE='JavaScript'>
  // if you want to work with the responsive menu you will need to get the JS code from the Chrome dev-tools
  // wp-include/blocks/navigation/view.js
</script>
</html>

I have applied Zbows changes and made some of my own, this is how it looks now: After Zbow's Changes

Improve this question

1 Answer 1

Reset to default
2

For the 'Everything' submenu, you can target it and then set the width to simply fit the content.

nav.wp-container-2 li.wp-block-navigation-item.has-child ul.wp-block-navigation__submenu-container {
    width: fit-content;
}

This worked for me on StackBlitz, but you may need greater specificity (MDN) to target the element in your project. Note that you can also flag it as important (MDN)

width: fit-content !important;

!important can be a useful tool, especially when dealing with WordPress, but it's not best practice to start slapping it on everything, tempting as it may be. I would suggest some extra reading on specificity and the important flag.

For the last point, I tried to leave a comment to clarify, but I can't do so until I have more reputation I guess. Do you want 'The Seasons', 'Plants & Animals', and 'News & Events' submenus all to be the same height and then have a visible border around it? In other words, plants & animals and new & events will have blank space under them in order to match the height of the seasons.

Improve this answer
2
  • It's not perfect but it eliminated the annoying extension bump out. I remove any tags as follows: .wp-block-navigation .gc-is-mega-sub-menu.wp-block-navigation-item.has-child .wp-block-navigation__submenu-container
    – Phil Huhn
    Commented Dec 22, 2022 at 16:38
  • Thank-you for responding, and welcome to Stack-Exchange.
    – Phil Huhn
    Commented Dec 22, 2022 at 17:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.