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

Hello,

You will systematically have conflicts by loading third-party CSS files. The easiest way, in my opinion, is to recreate the menu.

• In prosilver/template/
  • create main_menu_head.html containing the following code:

    Code:

    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Figtree:ital@0;1&display=swap" rel="stylesheet"><link rel="stylesheet" href="{{ T_THEME_PATH }}/main_menu.css?assets_version={{ T_ASSETS_VERSION }}">

  • create main_menu.html containing the following code:

    Code:

    <div class="main-menu-wrap"><ul class="main-navlinks"><li><a href="https://dawnofthenightingales.com/"><span>Home</span></a></li><li><a href="https://dawnofthenightingales.com/mecfs/"><span>ME/CFS</span></a></li><li><a href="https://dawnofthenightingales.com/?page_id=90"><span>Fibro</span></a></li><li><a href="https://dawnofthenightingales.com/blog/"><span>Blog</span></a></li><li><a href="https://dawnofthenightingales.com/events/"><span>Events</span></a></li><li><a href="{{ U_INDEX }}"><span>Forum</span></a></li></ul><ul class="social-navlinks"><li><a href="https://www.facebook.com/groups/dawnofthenightingales/"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="sr-only">Facebook Group</span></a></li></ul></div>

• In prosilver/theme/
  • create main_menu.css containing the following code:

    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;}.main-menu-wrap ul {display: flex;flex-wrap: wrap;align-items: center;list-style: none;}.main-menu-wrap a {color: #202220;text-decoration: none;}.main-navlinks {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;}

• Open overall_header.html
  • Find:

    Code:

    <link href="{T_STYLESHEET_LINK}" rel="stylesheet">

    Add after:

    Code:

    {% INCLUDE 'main_menu_head.html' %}

  • Find:

    Code:

    <!-- EVENT overall_header_body_before -->

    Add after:

    Code:

    {% INCLUDE 'main_menu.html' %}

I've kept it as simple as possible but I haven't yet implemented responsive design. I'll wait to see if the method suits you before continuing.

Statistics: Posted by cabot — Thu Mar 14, 2024 12:05 pm

---