I’ve acquired a restricted information of CSS. What I do know I’ve discovered whereas programming. That mentioned, I’m working with the Twenty-Twenty-Two theme. I’m making an attempt so as to add a mega-menu to my little one theme. The Twenty-Twenty-Two theme is attention-grabbing in that it’s not utilizing HTML tags with its navigation CSS. As I see it, it will enable the designers to make use of both ul or div tags to outline the menu. I’ve gotten it to the next:
I outline the mega menu through a single CSS class of gc-is-mega-sub-menu on the primary menu merchandise (li). I’m creating the CSS in a stand-alone net web page through extracting the required CSS and JavaScript.
I checked out Quick & Straightforward WordPress Mega Menu with out Plugins and in addition An Straightforward Technique to Code a Mega Menu in WordPress
I’m not proud of the looks. The road containing The Seasons is actually width of 100% and ends in an annoying extension bump out. That line additionally has a border notch after the final merchandise.
Ideally, I would love a visual border across the complete mega-menu. It might be nice if the border was an everyday rectangle, not an irregular type. Any suggestion can be appreciated.
You possibly can seek for ‘mega-menu CSS’ for the precise add-on code for the mega menu. I simply paste that small block of CSS into my little one theme’s type.css. Sadly, the physique of a message is restricted to 30000 characters, so I used to be not in a position to paste the entire instance into StackExchange. The code is the event code, minus the the next:
- wp-content/themes/twentytwentytwo/type.css
- wp-include/blocks/navigation/type.css
- wp-include/blocks/navigation/view.js.
Or, I’ve created a model of the mega-menu on StackBlitz
<html>
<head><title>Mega-Menu Growth</title></head>
<type sort="textual content/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;
}
physique {
font-size: 1.5rem;
background-color: #fff;
}
</type>
<type>.wp-container-2 {show: flex; hole: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;align-items: left;justify-content: flex-end;}.wp-container-2 > * { margin: 0; }</type>
<type>.wp-container-3 {show: flex; hole: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;align-items: left;justify-content: space-between;}.wp-container-3 > * { margin: 0; }</type>
<type>.wp-container-4 > :the place(:not(.alignleft):not(.alignright)) {max-width: 650px;margin-left: auto !necessary;margin-right: auto !necessary;}.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: proper; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-4 > .aligncenter { margin-left: auto !necessary; margin-right: auto !necessary; }.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; }</type>
<type sort="textual content/css">
/* Insert types from
wp-content/themes/twentytwentytwo/type.css
wp-include/blocks/navigation/type.css
*/
/* 2022 WordPress Theme, (C) 2021 WordPress.org */
/* Finish of 2022 WordPress Theme */
/* wp-include/blocks/navigation/type.css */
/* Finish of wp-include/blocks/navigation/type.css */
</type>
<type sort="textual content/css">
/*
== mega-menu CSS for 2022 theme ==
*/
.wp-block-navigation {
/* set the assorted preset values */
--gc--mega-menu-preset--background-color: #e0e0e0;
--gc--mega-menu-preset--border: 1px strong rgba(76,76,76,.3) !necessary;
--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;
}
/* = begin the nav tag with relative = */
.wp-block-navigation {
place: relative;
min-width: 99%; /* corrects funky notch after final prime ul,
however create a notch after 2nd ul,
notch dimension primarily based on that ul line-height */
}
/* = li that comprises a sub-menu = */
.wp-block-navigation-submenu {
line-height: var(--gc--mega-menu-preset--main-row-line-height);
}
/* = li that comprises a hidden mega sub-menu = */
.gc-is-mega-sub-menu.wp-block-navigation-submenu {
place: static;
}
/* = ul that comprises the mega sub-menu = */
.gc-is-mega-sub-menu.wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
show: flex;
visibility: hidden;
opacity: 0;
place: absolute;
prime: 100%;
left: 0;
proper: 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);
}
/* = show the sub-menu column no-wrap and never bleed through 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;
}
/* = show the sub-sub-menu column below 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 {
show: flex;
visibility: hidden;
opacity: 0;
place: absolute;
prime: 100%;
left: 0;
proper: 0;
width: 100%;
overflow: seen;
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);
}
/* = cover 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;
}
/* show each ul as flex and visual 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 {
show: flex;
visibility: seen;
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 {
show: flex;
place: relative;
visibility: seen;
opacity: 1;
border: none;
flex-wrap: nowrap;
flex-direction: column;
justify-content: var(--navigation-layout-justify,preliminary);
align-items: var(--navigation-layout-align,preliminary);
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;
prime: 3.3rem;
}
}
/* == Finish of mega-menu CSS for 2022 theme == */
</type>
<physique>
<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" type="padding-top:0px;padding-bottom:60px; background: #077676;">
<div class="wp-container-3 is-content-justification-space-between wp-block-group alignwide" type="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" peak="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" peak="1.5"></rect><rect x="4" y="15" width="16" peak="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="Shut 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" peak="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 category="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Dwelling</span></a></li>
<li class="wp-block-navigation-item has-child open-on-hover-click wp-block-navigation-submenu"><a category="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 category="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Folks</span></a></li>
<li class=" wp-block-navigation-item wp-block-navigation-link"><a category="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 category="wp-block-navigation-item__content" href="#" title="">Every part</a><button aria-label="Every part 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" peak="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 category="wp-block-navigation-item__content" href="#"><robust>The Seasons </robust></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" peak="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 category="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 category="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Summer time</span></a></li>
<li class=" wp-block-navigation-item wp-block-navigation-link"><a category="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 category="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 category="wp-block-navigation-item__content" href="#"><robust>Crops & Animals</robust></a><button aria-label="Crops & 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" peak="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 category="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 category="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 category="wp-block-navigation-item__content" href="#"><robust>Information & Occasions</robust></a><button aria-label="Information & Occasions 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" peak="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 category="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Information</span></a></li>
<li class=" wp-block-navigation-item wp-block-navigation-link"><a category="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Occasions</span></a></li>
</ul>
</li>
</ul>
</li>
<li class=" wp-block-navigation-item wp-block-navigation-link"><a category="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Get Concerned</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
<div class="wp-container-4">
<h3>Content material line, Content material line. Content material line, Content material line.</h3>
<h3>Content material line, Content material line. Content material line, Content material line.</h3>
<h3>Content material line, Content material line. Content material line, Content material line.</h3>
<h3>Content material line, Content material line. Content material line, Content material line.</h3>
</div>
</div>
</physique>
<script LANGUAGE='JavaScript'>
// if you wish to work with the responsive menu you will want to get the JS code from the Chrome dev-tools
// wp-include/blocks/navigation/view.js
</script>
</html>
