So close to getting Website Nav Bar at top of Forum but need a little help

[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? Fresh Install
Is registration required to reproduce this issue? No
Do you have any MODs installed? No
Do you have any extensions installed? Yes
What extensions do you have installed? Avatars on Member List, User Recent Activity and Extension News by Senky
Tabbed Profiles and Tabbed Stats by Zyleta
Left Side Post Profiles by ForumFlair
Multi Links by lmdi (currently disabled)
Newest Members by dmzx (currently disabled)
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? I tried to look into other people's help/advice on getting my website nav bar at the top of the phpbb forum.
Please describe your problem. While I've got close, I haven't been able to quite get my website nav bar at the top of the forum like I wish to. I've been playing about with codes for three days now and struggling to do it myself. (Have some coding experience). I seem to be getting two possible outcomes when trying.
1) I get the website nav bar close to perfect but unfortunately, some of the nav bar code affects the forum itself.
2) I get close, the nav bar is there and useable but I am missing some styling to have the look perfect (this styling code to achieve that is what messes up the forum, probably due to the code having 'body' in it).

Been trying to use Codepen to get it right
What it should look like (but messes up the forum) : https://codepen.io/Emily-Radcliffe/pen/RwOGbgY

I put in

Code: Select all

<!-- EDIT THE GLOBAL STYLES HERE THAT MESSES WITH THE FORUM WHEN USED -->

<!-- END OF THE GLOBAL STYLES THAT MESSES WITH THE FORUM WHEN USED -->

Around the code that is causing problems for easy finding.


What I've been trying to play around with to enter my own styling to get the look without using that one piece of code that messes up the forum : https://codepen.io/Emily-Radcliffe/pen/NWmRWLg

Number one screenshot :


Number two screenshot :


Hopefully I've included all the right information for someone to kindly help me.

Generated by SRT Generator

[cabot]

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: 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">
    <link rel="stylesheet" href="{{ T_THEME_PATH }}/main_menu.css?assets_version={{ T_ASSETS_VERSION }}">

  • create main_menu.html containing the following code:

    Code: Select all

    <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: Select all

    .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: Select all

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

    Add after:

    Code: Select all

    {% INCLUDE 'main_menu_head.html' %}

  • Find:

    Code: Select all

    <!-- EVENT overall_header_body_before -->

    Add after:

    Code: Select all

    {% 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.

[EDRemz]

I had a feeling I might have to recreate the menu but it was out of my comfort zone.

https://dawnofthenightingales.com/forum/index.php

As you can see this works perfectly! Thank you so much for your help. Perhaps I should have asked earlier instead of getting frustrated for three days straight

[cabot]

So we're going to implement responsive.

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

  Code: Select all

  (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: Select all

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

    Add after:

    Code: Select all

    {% INCLUDEJS 'main_menu.js' %}

• Open main_menu.html
  • Find:

    Code: Select all

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

    Replace with:

    Code: Select all

    <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: Select all

    	<ul class="social-navlinks">

    Replace with:

    Code: Select all

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

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

    Code: Select all

    .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: Select all

    {% INCLUDE 'main_menu_head.html' %}

    Replace with:

    Code: Select all

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

  • Find:

    Code: Select all

    {% INCLUDE 'main_menu.html' %}

    Replace with:

    Code: Select all

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

There, that's safer. ^^

[EDRemz]

I got so happy it worked, I forgot it wasn't complete.

Added/changed the parts mentioned and everything working great. Again, thanks so much for your help!

[EDRemz]

I might have noticed a problem.

Some of the extensions I had installed beforehand are no longer working.

Tabbed Profiles and Tabbed Stats by Zyleta
Left Side Post Profiles by ForumFlair

The two tabbed extensions from Zyleta don't replace the previous information but now there's double. The original info and now a tabbed version.
Whereas the left-side post profiles are just not working at all now.

Avatars on Member List, User Recent Activity and Extension News by Senky all seem to be working, tho the avatar on the member list is bigger now it's not too much of a problem compared to the double info problems and the left side post profiles not working at all.

I've even added some new extensions since doing the website nav menu like that of NavBar Search by HiFiKabin which works fine.

But another one I tried to add after the website menu, Collapsible Forum Categories, doesn't completely work due to the placement of the -/+. I'm wondering if this is due to the website menu like the ones that currently aren't working but were before.

I wasn't sure where to put this. Here on this thread or start another (even though it's stated to post extensions problems in the support area within the Customisation Database). So apologises if I've posted this in the wrong place but I feel like it is due to the website menu for some reason and thought I should double-check it isn't before running around to each extension creator.


EDIT : Thought a screenshot of this might be useful.

[cabot]

I don't see any extension stylesheets loaded on your board.
Check that you have this code in overall_header.html, after <!-- EVENT overall_header_head_append -->:

Code: Select all

{$STYLESHEETS}

[EDRemz]

Well, don't I feel stupid

I must have accidentally deleted it at some point

Thank you, everything is mostly working now apart from the Collapsible Forum Categories -/+ symbol isn't where I wish it to be/should be. I'll go over to the support area within the Customisation Database for that one. Thanks yet again.

[cabot]

You have removed the float: right declaration on the .collapse-btn selector from the extension. ^^

[EDRemz]

Of course

I was editing that file trying to fix it back when I didn't have

Code: Select all

{$STYLESHEETS}

and forgot to put it back to its original state

Yet again, thank you!

[cabot]

A small suggestion, if I may, don't modify the CSS files for the extensions but create a dedicated file to group together the CSS rules that need to override those of the extensions (or add them to the end of colours.css).
You can even create a small custom extension for this.
This will save you a lot of headaches when updating and you'll always know exactly where to look if you need to change them.

[EDRemz]

Suggestions are welcome. I usually download a copy of the original file or make a note of what I'm changing it from and to just in case. I thought I had that file back in its original state but obviously not.

[cabot]

I've edited my post, while you were posting yours, to add a link that might be of interest to you. By following this method, you shouldn't even have to worry about updates.

[EDRemz]

Thanks, will save the link

[ssl]

The ready-to-use extension exists here: https://mannix.altervista.org/app.php/d ... mcat?id=31
Reinventing the wheel is pointless.