How to achieve a persistent global navigation bar or menu bar on a website
Question
so i'm fairly new to html and css and all that, I've been practicing making a dummy website and I hit a wall. It is just a "Portfolio" website with three main categories. the Index is just a landing page of sorts. I was making a navigation bar for the page contents and I realized that the whole page loads each time an item from the nav bar is clicked, i was trying to make the nav bar stick somehow. Not to the top, I've already found how to do that, but globally across all the pages.
I tried with iframes since i figured it'd only load inside the container but i couldn't get it to work. The page just loaded entirely. Maybe there's a way with iframes but I read they are troublesome and I just don't know enough about how to work with them, so I scrapped that.
Here´s some code for the nav bar and the corresponding CSS if it helps.
body { background: #ffffff; font-family: "proxima-nova", sans-serif; padding: 0; margin: 0; } .btns { margin: 0 2%; width: 38%; max-width: 193px; min-width: 60px; justify-content: space-around; text-align: center; display: flex; flex-wrap: wrap; } .btns .btn { text-decoration: none; background: #4f1e39; width: 24%; min-width: 60px; max-width: 80px; color: #ffffff; padding: 4px 0px; margin: 4px 0; } .btns .btn:hover { background: #ffffff; color: #4f1e39; font-weight: bold; } .btns .current { text-decoration: none; background: #ffffff; width: 24%; min-width: 60px; max-width: 80px; color: #4f1e39; padding: 4px 0px; margin: 4px 0; font-weight: bold; } .centerstuff { width: auto; background-color: #4fc5d6; display: flex; flex-wrap: wrap; } .minilogobox { height: 35px; } .minilogobox img { max-width: 100%; max-height: 100%; padding: 1px 4px; }
<nav> <div class="centerstuff"> <div class="minilogobox"> <a href="../index.html"> <img src="https://i.imgur.com/mCfZDsq.png" alt="mini-logo" /></a> </div> <div class="btns"> <a class="current" href="/work.html"> Work</a> <a class="btn" href="/about.html"> About</a> <a class="btn" href="/contact.html"> Contact</a> </div> <!---<div class="pagetitle"><h1>/Work</h1></div>--> </div> </nav>So, I know there's a way, maybe I have to learn php or java. I'm sorry if this has been asked before, the only other question I've found was not useful.
2 answers
solution1
0 2020-10-29 19:41:39
Because you are navigating away from the page where your header is rendered, and this is a static html page, that code won't remain. When you navigate to a new page, everything in that html file is rendered, including the header code.
You'll need to use some kind of dynamic library to render the html you want to load, while keeping the rest in-tact. This is a long step away from type of development you're doing right now.
I would recommend using something like React and React Router to accomplish this.
As a final note however: you really don't need to worry about this. The majority of webpages work this way, your page should be loading fast enough that you don't even or barely notice it. Just include the header code in every page so that it is omni-present.
solution2
0 2020-10-29 20:16:43
Here's a simple show and hide section idea, using fragments and css pseudo target selector. Click on a link, show and jump to the appropriate section.
<html>
<head>
<style type='text/css'>
section {
display: none;
}
:target {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href='#about'>About</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
</nav>
<section id='about'>
All about me.
</section>
<section id='contact'>
Say hello.
</section>
</body>
</html>
(Please comment if this is an accessibility no no, or provide a fallback/workaround if there isn't adequate browser :target support.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.