[3.3.x] Styles Support & Discussion • Re: So close to getting Website Nav Bar at top of Forum but need a little help

So we're going to implement responsive.

• In prosilver/template/, create main_menu.js containing the following code:

  Code:

  (function ($) {const $toggleButton = $('#menu_toggle_button');const $menuList = $('#' + $toggleButton.attr('aria-controls'));$toggleButton.on('click', function () {if ($menuList.hasClass('is-open')) {$(this).attr('aria-expanded', 'false');$menuList.removeClass('is-open');} else {$(this).attr('aria-expanded', 'true');$menuList.addClass('is-open');}});})(jQuery);

• Open main_menu_head.html
  • Find:

    Code:

    <link rel="stylesheet" href="{{ T_THEME_PATH }}/main_menu.css?assets_version={{ T_ASSETS_VERSION }}">

    Add after:

    Code:

    {% INCLUDEJS 'main_menu.js' %}

• Open main_menu.html
  • Find:

    Code:

    <div class="main-menu-wrap"><ul class="main-navlinks">

    Replace with:

    Code:

    <div class="main-menu-wrap"><button id="menu_toggle_button" class="toggle-button" aria-expanded="false" aria-controls="main_navlinks"><svg class="svg-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="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><svg class="svg-close" 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><ul id="main_navlinks" class="main-menu-list main-navlinks">

  • Find:

    Code:

    <ul class="social-navlinks">

    Replace with:

    Code:

    <ul class="main-menu-list social-navlinks">

• Open main_menu.css
  • Replace the contents of the file with:

    Code:

    .main-menu-wrap {display: flex;flex-wrap: wrap;align-items: center;gap: 24px;justify-content: center;line-height: 1.7;margin: auto;max-width: 960px;padding: 8px 20px 20px;}.toggle-button {display: none;}.toggle-button:focus {outline: none;}.toggle-button:focus-visible {outline: 2px solid #0060df;}.main-menu-list {display: flex;flex-wrap: wrap;align-items: center;list-style: none;}.main-menu-wrap a {color: #202220;text-decoration: none;}.main-navlinks {display: flex;font-family: "Figtree", sans-serif;font-optical-sizing: auto;font-weight: 400;font-size: 18px;font-style: normal;gap: 32px;}.social-navlinks {font-size: 24px;gap: 20px;}.social-navlinks a {align-items: center;display: flex;line-height: 0;transition: transform .1s ease;}.social-navlinks a:hover {transform: scale(1.1);}.social-navlinks a svg {height: 1.25em;width: 1.25em;}@media (max-width: 700px) {.toggle-button {display: flex;}.main-navlinks {display: none;}.is-open {position: fixed;left: 0;right: 0;top: 0;bottom: 0;display: flex;width: 100%;flex-direction: column;gap: 24px;font-size: 24px;overflow: auto;background: #fff0e9;animation: overlay-menu__fade-in-animation .1s ease-out;animation-fill-mode: forwards;padding-top: calc(2rem + 24px);z-index: 999;}.toggle-button .svg-close {display: none;}.toggle-button[aria-expanded="true"] {position: absolute;top: 0.5rem;right: 0.5rem;z-index: 1000;}.toggle-button[aria-expanded="true"] .svg-close {display: initial;}.toggle-button[aria-expanded="true"] .svg-open {display: none;}}@keyframes overlay-menu__fade-in-animation {0% {opacity: 0;transform: translateY(.5em)}to {opacity: 1;transform: translateY(0)}}

I think that's it.

Edit : Oh yes, one more thing. In case you delete the HTML files without thinking of deleting the includes in the overall_header.html

• Open overall_header.html
  • Find:

    Code:

    {% INCLUDE 'main_menu_head.html' %}

    Replace with:

    Code:

    {% INCLUDE 'main_menu_head.html' ignore missing %}

  • Find:

    Code:

    {% INCLUDE 'main_menu.html' %}

    Replace with:

    Code:

    {% INCLUDE 'main_menu.html' ignore missing %}

There, that's safer. ^^

Statistics: Posted by cabot — Thu Mar 14, 2024 3:25 pm

---