css – Twenty-Twenty-Two Child Theme Mega Menu

Question

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>

0
Phil Huhn 2 months 2022-12-17T16:53:58-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse