Navigation Bar
Im trying to make my navigation bar appear at the top of everypage and i can scroll and it will still show at the top but idk how to do it im using html and css at the moment and have a js script that im not currently using any help will be appreciated.
70 Replies
Your quest is a #front-end question, so please make a post there.
Also please provide what you’ve tried AB’s where not working. See #how-to-ask-good-questions for more
Unlocked, with the understanding that this is #back-end and should be for backend-based solutions to this question 🙂
You want PHP include https://www.php.net/manual/en/function.include.php
This allows you to have a header as a PHP or HTML file and simply include it in other pages where you want the header
which language will you use in the backend?
and what's the server setup that will serve the website?
or will you use a static website generator?
currently, this is unanswerable
php includes require a php web server
server-side includes require an apache or a nginx server
there's many more options, like html frames (which you shouldn't consider) and many more
It’s not unanswerable, this type of question explains what their stack is
it is unanswerable until we know more about the tech stack
Well they’re not using any language that shows off templates as one of the first things, so they’re not using anything. It’s easy and cheap to get PHP working, so they’re using nothing and would benefit from PHP
there's other (legit) methods besides php
and other languages as well
in fact, he would probably benefit from NOT using php
It’s the simplest and easiest to manage, just requires 1 line of PHP in every file that wants an import, while also being available on every static host. Other languages incur costs which may be unnecessary if all they want is some templating
it also requires a web server and php
What did I just say?
If you find a static web host they support PHP, they’re also so much cheaper than hosts for other languages. There’s no point paying extra just for templating, just because PHP isn’t the nicest language
depending on the use case, that is a non-starter
it's impossible to get cheaper than free, like how a static website works
for example, github pages is free
and you can only serve static html pages from it
I’m aware but not every website can work on GitHub pages so it seems dumb to point people who want to learn to make something properly to use a platform that doesn’t allow them to expand
and that's why this is unanswerable until we know the full tech stack
or without knowing what the page is going to be used for
we don't have enough context to answer this properly
Ok so it might just be I have 6.5 years of helping people with programming on Discord that I know when to assume things and to let them go “no, can you give me another option?”. They asked this question in #back-end so I think it’s safe to assume they want a backend solution and that’s not going to work on GitHub pages
Stop trying to act really smart and superior and actually help, sure PHP is not the best in most regards but it’s easy and cheap. I got the question opened to suggest an answer that fit what they were asking for and you think you can object and say we shouldn’t help just yet and instead just tease it out?
im not
im just saying there's more options than php
yes, this is in back-end, but doesn't mean you need the entire backend
Damn thats deep
yes, but completely wrong as well
it comes from assuming i hate php, when i actually use it everyday for the last 12 years
just think you need to provide more context for a better answer
Could you not use sticky/fixed nav? Is that what you want?
he doesn't want to repeat code
Yeah
So it's more of a component
I use react but...
There's this ting called web components
Web Dev Simplified
YouTube
Learn Web Components In 25 Minutes
React was the framework that really popularized component driven development, but they weren’t the first and are definitely not the only tool for creating components. JavaScript actually has its own built in way to create components called web components which have many of the same benefits of React components. In this video I show you how to cr...
Never used it myself because I didn't know it was a thing but it's look like this is what you are looking for. Since you want to make reusable components
@Sp00kzy
that is a valid solution, yes
but i believe we do need more context
OP didn't know the difference between frontend and backend when they originally asked this in #general, so I doubt we'll get it
yup. but if he told us what he knows and/or wants to learn, it would be a whole lot easier
U are kinda confusing me
Telling me its good on one side but saying its bad on the othe
if you ask a question of three developers, you'll get six answers. The more tightly you can define your question, the more useful the answer will be
there's a thousand ways to do what you asked, basically all of modern web development is focused on doing exactly what you describe, writing things once and then using them in multiple places
that unfortunately means that everyone has a different opinion on what the best way to start out is. Some might say (and I agree there) that PHP is a good solution for what you're asking, others might have other opinions. We know next to nothing about your skill level, and what you have experience with though, so it's hard to give a proper answer
Practically no skill
But i learn fast
what do you want to learn? what direction do you want to go in for web development?
do you know javascript? do you know php? python? just html?
You have posted something without much context. In the #back-end
But your description sounds very much like a front end problem.
And is it design problem or routing?
it's both
that's the biggest problem
unless we have the requested context, we can't really decide on it
Learning all of them
I have 0 knowledge of js tho
are you learning any framework, like react or svelte or something?
idk what that is im trying to get my nav bar to stay at the top on every page
what context do u want
the code?
Do you want to keep the nav bar at the top of the screen while you're scrolling, or do you want to write the navbar once and then include it on all your pages?
i want it included on all the pages but not when im scrolling
are you currently using PHP, or do you just have an HTML file sitting on your harddrive that you're opening by double clicking? Or something else?
i got a folder on my desktop with different html files and 1 css one
ive only put code on index.html though
no zips please
why
they're a security risk
oh right
then there is no practical way to include your same nav bar in each page without copying it manually. You need something else to do that work of combining things
how would i do it without manually having to do it
and are there free domains i can use
there's a million different ways, pretty much all of modern web development is aimed at reusing your code multiple places. You need to pick what you want to focus on learning. I'd honestly recommend just copy/pasting for now, and learning HTML, CSS and JavaScript
thats my index.html
ive tried but it doesnt work
as in copy pasting the whole file and editing it to how i want it or just the code
the css messes up when i try
copy/pasting the <nav> element to a separate file
Right, that's something we can try to solve, but that is 100% a #front-end question. Give #how-to-ask-good-questions a read and make a post there
you'll have to be a lot more specific than "css messes up" though 🙂
it just doesnt load in
so i copy and paste that
yes. Into a file, and put it where you want your nav to go
like a new file or to every file i want to have that show up in
every file you want it to show up in
ok cool
ill test it
if you're just starting out, which it seems you are, learning more on top of that to include things isn't the best use of your time
I am
for future reference, it's very likely your questions should go in #front-end. If it's just HTML and CSS, then it's definitely #front-end
Do i now do the same with a css file so this gets neatened out
someone told me to do it in back end and i was confused
you should be able to copy the link tag that references your css, you don't need to have multiple css files if you just want them to do the same
im very sorry but what is a link tag
i am so new
oh ik
<link rel="stylesheet" type="text/css" href="style.css"> this right
yup
I'd honestly recommend building a couple of pages with some beginner tutorials first, it'll help you get an idea of what all the parts do
if you get stuck, you can ask in #front-end
idk why it isnt working
its annoying me
make a post in #front-end for that, include a screenshot of your folder structure and the code of your page where it doesn't work (and which one it is in the folder structure)
I'm heading out for now, if it's not answered later I'll try to take a look
IVE DONE IT!
Congrats!
just the buttons dont work now lmao
only work on the home screen
that's a good question to ask in #front-end 🙂