(Miss) Adventures in Topnav
May 24, 2024
Tags: Site Updates, Web Mastery
As you may have noticed, my site has a lot of pages - and is only going to get more. This is primarily thanks to each blog post having its own seperate page on the site. Needless to say, manually having to update the HTML on every single page for any reason would be nothing short of a nightmare. While I don't anticipate having to do this much, I did have to do this once to add the new Hoard page (note: I did not actually do this manually, thank god). More over, I do plan on having to do it again: I still need to add my shrine home page link to the top navigation bar... when it's acctually ready to be added to the site. Issue: I am not manually updating all of these pages. Besides, what if - for whatever reason - I need to do it AGAIN?
What I needed was an auto-updating nav bar; a nav bar where I could edit just one file and have it update across the entire site. Originally, my solution was Templaterr's auto updating navbar. And this is what the site had for almost two weeks, and it worked perfectly fine. And then I added the hoard page to my site, and a link to the hoard in the topnav. See, this code I found? Was clearly meant for smaller, simpler sites. I should have realized that when the intended method of adding pages was to add the one-word title of the page. For example, to add my about page - with the url https://your-local-grubdog.neocities.org/about - all I really needed to do was type "about" into the appropriate place in the code and it would figure itself out. But it couldn't do that for pages like the hoard (which is listed under /the-hoard - that's two words) or the blog (which is listed under /blog/blog-archive for backend organizational reasons). But a work-around was provided so I figured eh, why not use it anyways?
Because it wasn't made with sites like mine in mind. It was made for people with very small and simple sites.
I emphazise this because I do not think that this free to use code is bad in the slightest. I still would reccomend it to people who DO have sites that are small enough for it to handle! But for this site... uh... yeah it kind of visually broke on mobile when I added one too many links. It still functioned, links just ran off the screen because they could no longer fit in just one row. And I don't know Javascript, so I wasn't too keen on messing with the code too much to see if I could make it work.
So I needed a diffrent solution, and after some research I came to what I'm currently using: iframes. It certainly has its own flaws for sure, but it functions and looks nice on most screens (it may look a little odd if your screen is massive, but it does play nice with phones).
Now I'm NO master at HTML/CSS - a glance at my code could tell you that much - but if you're particularly intrested in re-using this code on your own site then, uh, here it is! Credit is NOT required for this particular bit of code. Yes, this contradicts the request in the footer, but it also over-rides it because this is really nothing special.
First, a page with this code titled navbar.html - note that (A) the CSS is designed for my site, so you will need to edit it to fit your needs and (B) the CSS is "incomplete", as its meant to "add on" to a linked stylesheet. So you'll have to fiddle around with that on your own.
<head>
<style>
.nav {
background-color: var(--darkbrown);
border-style: solid;
border-color:var(--black);
border-radius: 5px;
padding: 5px;
text-align: center;
}
.nav p {
margin-bottom:0px;
padding: 15px 5px 15px;
}
.nav a {
color: var(--lightbrown);
text-decoration: none;
margin: 15px;
}
</style>
</head>
<body>
<div class="nav">
<p>
<a href="your url" target="_parent">Home</a>
<a href="your url" target="_parent">About</a>
<a href="your url" target="_parent">Blog</a>
</p>
</div>
</body>
VERY important! When adding the links, be sure to include target="_parent", otherwise links will open in the iframe and not the nav bar.
After that, just paste <iframe src="navbar.html" title="navigation bar"></iframe> where you want your navbar to be on each page.
Moral of the story? Sometimes you just have to code things yourself and can't always rely on what worked for others lmao. Unless your site is very simple. In which case, more power to ya.