Nav-bar link problems

Bug Reports
1

Hello!
I have some problems with nav-bar (option smart active state is On).

Structure of website:
-index.html
-contacts.html
–folder1/page1.html

When I want to click to link (Index.html) on page (folder1/page1.html) I can see url (folder1/index.html), but this url has not found. I know that NavBar links with all pages.

There are three ways to solve problems:

  1. make an absolute links on the pages (**It is not interesting);
  2. Unlink NavBar. Create new NavBar for the page on other folder. (**But this is madness, if there are a lot of folders);
  3. To make links in the NavBar, for example “…/index.html” (**But active links will no longer be highlighted)

Example website

How to solve this problem? ))
Thanks :slightly_smiling_face:

2

You can do it like this

3

I’m not exactly a spring chicken when it comes to website development, but it would take me days to dissect everything you’ve done in that example :raised_hands: and (try to) figure out how it works.

To an uninitiated person, I’d compare it to Elon Musk parking a brand new Tesla in your driveway and saying, “here’s a electric vehicle I made. You can copy it and build your own.” :woozy_face:

4

You can copy the smart active navbar code on the code page with two clicks and paste it into a design and you have a working example.

I can teach my dog to do that in a couple of hours

The other examples are there to not have a blank page when you click a link.

1 Like
5

Oh yes, I already did that, and you actually helped me out to get it working in DM you sent me a couple of weeks ago (thank you.)

I was referring more to all the other stuff… the light/dark technique, the animations triggered on scroll. I mean, I guess with enough persistence I can figure anything out, but you seem to put these examples together effortlessly. I often find myself :star_struck: looking at your work. Your presence in this forum is invaluable. You should be on the Zine payroll.

6

hmmm, link doesn’t work …

7

Kuligaposten only leaves his examples up for about a week. Get 'em while they’re hot!

8

@demko

You add an attribute data-page="NAME-OF-THE-PAGE" without the .html to each nav-link and dropdown-item in the navbar like this

<li class="nav-item">
	<a class="nav-link" 
		href="index.html" 
		data-page="index">Home
	</a>
</li>
<li class="nav-item dropdown">
	<a class="dropdown-toggle 
		nav-link" aria-expanded="false" 
		data-bs-toggle="dropdown" 
		href="#">Dropdown 
	</a>
	<div class="dropdown-menu">
		<a class="dropdown-item" 
			href="subfolder/contacts.html" 
			data-page="contacts">Contacts
		</a>
	</div>
</li>

Add this script to a javascript-file

Javascript

document.addEventListener('DOMContentLoaded', function() {
	let page = location.pathname.substring(location.pathname.lastIndexOf('/') + 1, location.pathname.lastIndexOf('.'));
	if (location.pathname.search('.html') === -1) page = 'index';
	const thisPage = document.querySelector(`[data-page="${page}"]`);
	if (thisPage) {
	  document.querySelectorAll('.active').forEach((page) => page.classList.remove('active'));
	  thisPage.classList.add('active');
	  if (thisPage.parentElement.classList.contains('dropdown-menu')) {
		thisPage.parentElement.parentElement.firstChild.classList.add('active');
	  }
	}
}, false);

It will work with linked navbars as well

1 Like