Website Navbar above forum to be updated

For support and discussion related to templates and themes in phpBB 3.3.
User avatar
EDRemz
Registered User
Posts: 18
Joined: Wed Mar 13, 2024 10:17 am
Name: Emz

Website Navbar above forum to be updated

Post by EDRemz »

Support Request Template
What version of phpBB are you using? phpBB 3.3.11
What is your board's URL? https://dawnofthenightingales.com/forum/
Website and Nav bar = https://dawnofthenightingales.com/
Who do you host your board with? Bluehost
How did you install your board? I used a tool provided by my host
What is the most recent action performed on your board? Just posting
Is registration required to reproduce this issue? No
Do you have any MODs installed? Don't think so
Do you have any extensions installed? Yes
What extensions do you have installed? Quite a few to type so hope you don't mind an image instead
Image

What styles do you currently have installed? ProSilver
What language(s) is your board currently using? English
Which database type/version are you using? I Don't Know
What is your level of experience? New to PHP and phpBB
What actions did you take (updating your board; installing a MOD, style or extension; etc.) prior to this problem becoming noticeable? Nothing like that, updated my navbar on the website and now need it to match when in the forum.
Please describe your problem. Hopefully posting in the right area here. I posted here before to get help in adding my website navbar to above the forum. A user called cabot kindly helped me in getting it all set up. Since then I have added more pages to my website and updated the navbar to have some drop-down menu elements. If it was the case of just adding new direct menu links I would have no trouble adding these myself. But I know with drop-down there will have to be a new CSS style for those parts at least. I'm not as good in that area and hoped someone could tell me what to do.

So ermmm, yeah, need CSS and how to add these new parts to the 'main_menu.html' file. I'll link up the previous post where I got help for setting up the navbar if that helps - viewtopic.php?p=16004026#p16004026

Generated by SRT Generator
User avatar
cabot
Jr. Style Validator
Posts: 997
Joined: Sat Jan 07, 2012 4:16 pm

Re: Website Navbar above forum to be updated

Post by cabot »

Hello,

The rendering isn't exactly like the one on the site, especially on small screens, because I had to redo all the code and I don't have enough time to fine-tune it. But I've tried to get close.

main_menu_head.html:

Code: Select all

<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">
{% INCLUDECSS 'main_menu.css' %}
{% INCLUDEJS 'main_menu.js' %}
main_menu_.html:

Code: Select all

<nav class="main-menu-wrap" aria-label="Main menu">
	<button id="menu_toggle_button" class="toggle-button" aria-expanded="false" aria-controls="main_navlinks" aria-label="Open the menu">
		<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">
		<li>
			<a href="https://dawnofthenightingales.com/"><span>Home</span></a>
		</li>
		<li class="has-child">
			<a><span>About</span></a>
			<button aria-label="About submenu" class="submenu-toggle" aria-expanded="false" aria-controls="about_submenu">
				<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 id="about_submenu" class="main-menu-sub-list">
				<li><a href="https://dawnofthenightingales.com/nightingales/">Nightingales</a></li>
				<li><a href="https://dawnofthenightingales.com/aboutmecfs/">ME/CFS</a></li>
				<li><a href="https://dawnofthenightingales.com/aboutfibro/">Fibro</a></li>
			</ul>
		</li>
		<li class="has-child">
			<a><span>Support</span></a>
			<button aria-label="Support submenu" class="submenu-toggle" aria-expanded="false" aria-controls="support_submenu">
				<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 id="support_submenu" class="main-menu-sub-list">
				<li><a href="https://dawnofthenightingales.com/mecfssupport/">ME/CFS</a></li>
				<li><a href="https://dawnofthenightingales.com/fibrosupport/">Fibro</a></li>
				<li><a href="https://dawnofthenightingales.com/carerssupport/">Carers</a></li>
				<li><a href="https://dawnofthenightingales.com/financialsupport/">Financial</a></li>
				<li><a href="https://dawnofthenightingales.com/aidsandgadgets/">Aids and Gadgets</a></li>
				<li><a href="https://dawnofthenightingales.com/carerhomehelp/">Carer/Home Help</a></li>
				<li><a href="https://dawnofthenightingales.com/mentalhealth/">Mental Health</a></li>
			</ul>
		</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 class="has-child">
			<a><span>Extras</span></a>
			<button aria-label="Extras submenu" class="submenu-toggle" aria-expanded="false" aria-controls="extras_submenu">
				<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 id="extras_submenu" class="main-menu-sub-list">
				<li><a href="https://dawnofthenightingales.com/downloads/">Downloads</a></li>
			</ul>
		</li>
		<li>
			<a href="{{ U_INDEX }}" aria-current="page">
				<span>Forum</span>
			</a>
		</li>
	</ul>
	<ul class="main-menu-list 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>
</nav>
main_menu.css:

Code: Select all

.main-menu-wrap {
	color: #202220;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	justify-content: center;
	line-height: 1.7;
	padding: 8px 20px 20px;
}

.main-menu-wrap a {
	color: inherit;
	text-decoration: none;
}

.toggle-button {
	display: none;
}

.toggle-button:focus-visible,
.submenu-toggle:focus-visible {
	outline: 2px solid #0060df;
}

.main-menu-list > li {
	align-items: center;
	display: flex;
	position: relative;
}

/*
Main menu
--------------------------------------------------------------------------- */
.main-navlinks {
	display: flex;
	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 18px;
	font-style: normal;
	gap: 32px;
}

/*
Sub menus
--------------------------------------------------------------------------- */
.main-menu-list .has-child > ul > li > a {
	padding: .5em 1em;
}

.main-menu-list .submenu-toggle {
	align-self: center;
	background-color: inherit;
	border: none;
	color: currentColor;
	cursor: pointer;
	display: inline-block;
	font-size: inherit;
	height: .6em;
	line-height: 0;
	margin-left: .25em;
	padding: 0;
	width: .6em;
}

.main-menu-list .submenu-toggle svg {
	display: inline-block;
	stroke: currentColor;
	height: inherit;
	margin-top: .075em;
	width: inherit;
}

.main-menu-sub-list {
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	align-items: normal;
	display: flex;
	flex-direction: column;
	height: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: 100%;
	transition: opacity .1s linear;
	visibility: hidden;
	width: 0;
	z-index: 2;
	list-style: none;
	left: auto;
	right: 0;
}

.main-menu-list .has-child:hover > ul,
.main-menu-list .submenu-toggle:hover + ul,
.is-open {
	height: auto;
	min-width: 200px;
	opacity: 1;
	overflow: visible;
	visibility: visible;
	width: auto;
}

/*
Social links
--------------------------------------------------------------------------- */
.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: 1em;
	width: 1em;
}

/*
Media queries
--------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.main-menu-wrap {
		padding-top: 20px;
	}

	.main-menu-wrap:has(.is-open) {
		background-color: #fff0e9;
	}

	.toggle-button {
		display: flex;
	}

	.main-navlinks {
		display: none;
	}

	.main-navlinks.is-open {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 24px;
		font-size: 24px;
		padding-top: calc(2rem + 24px);
		animation: menu-animation .1s ease-out;
	}

	.main-navlinks.is-open > li {
		flex-direction: column;
		align-items: start;
	}

	.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;
	}

	.is-open .has-child > a {
		color: #6c6c6c;
	}

	.main-menu-list .has-child > ul {
		position: static;
		background-color: inherit;
		padding-left: 10vw;
		border: 0;
		visibility: visible;
		width: auto;
		opacity: 1;
		height: auto;
	}

	.main-menu-list .has-child > ul > li > a {
		padding: 0.5em 0;
	}

	.main-menu-list .submenu-toggle {
		display: none;
	}

	.is-open + .social-navlinks {
		display: none;
	}
}

/*
Keyframes
--------------------------------------------------------------------------- */
@keyframes menu-animation {
	from {
		opacity: 0;
		transform: translateY(.5em)
	}
	to {
		opacity: 1;
		transform: translateY(0)
	}
}
main_menu.js:

Code: Select all

(function ($) {
    const $mainMenuButton = $('#menu_toggle_button');
    const $mainMenuList = $('#' + $mainMenuButton.attr('aria-controls'));
    const $subMenuButtons = $('.submenu-toggle');
    const $subMenuLists = $('.main-menu-sub-list');

    // Toggle state of a menu
    function toggleMenu($button, $menu) {
        const isOpen = $menu.hasClass('is-open');
        $button.attr('aria-expanded', !isOpen);
        $menu.toggleClass('is-open');

        if ($button.is($mainMenuButton)) {
            $mainMenuButton.attr('aria-label', isOpen ? 'Open the menu' : 'Close the menu');
        }
    }

    // Init sub-menu status based on viewport size
    function initMenuState() {
        const isMobileView = window.matchMedia("(max-width: 700px)").matches;
        $subMenuLists.toggleClass('is-open', isMobileView);
        $subMenuButtons.attr('aria-expanded', isMobileView);
    }

    // Main menu handler
    $mainMenuButton.on('click', function () {
        toggleMenu($(this), $mainMenuList);
    });

    // Sub-menu handler
    $subMenuButtons.on('click', function (e) {
        e.preventDefault();
        const $thisButton = $(this);
        const $thisMenu = $('#' + $thisButton.attr('aria-controls'));

        if (!window.matchMedia("(max-width: 700px)").matches) {
            // Close other sub-menus if not in mobile view
            $subMenuLists.not($thisMenu).removeClass('is-open');
            $subMenuButtons.not($thisButton).attr('aria-expanded', 'false');
        }

        toggleMenu($thisButton, $thisMenu);
    });

    // Keyboard interaction for closing menus
    $(document).on('keydown', function (e) {
        if (e.key === "Escape") {
            // Close main menu
            if ($mainMenuList.hasClass('is-open')) {
                $mainMenuButton.trigger('focus');
                toggleMenu($mainMenuButton, $mainMenuList);
            }

            // Close sub-menu
            $subMenuLists.filter('.is-open').each(function () {
                const $thisSubList = $(this);
                const $thisSubButton = $('[aria-controls="' + $thisSubList.attr('id') + '"]');
                $thisSubButton.trigger('focus');
                toggleMenu($thisSubButton, $thisSubList);
            });
        }
    });

    // Update aria attributes on resize
    $(window).on('resize', initMenuState);

    // Init menu state on loading
    initMenuState();
})(jQuery);
User avatar
EDRemz
Registered User
Posts: 18
Joined: Wed Mar 13, 2024 10:17 am
Name: Emz

Re: Website Navbar above forum to be updated

Post by EDRemz »

Thank you very much! Looks great and matches perfectly.
User avatar
cabot
Jr. Style Validator
Posts: 997
Joined: Sat Jan 07, 2012 4:16 pm

Re: Website Navbar above forum to be updated

Post by cabot »

Glad I could help. ;)

Return to “[3.3.x] Styles Support & Discussion”