#navbar html css

[codenewbies]

Responsive Navigation Menu

[codingflicks]

Navbar Animation with Moving Hover Effect

[divinector]

Responsive navbar

[stormeko]

Going through and changing my headings on Neocities. I need to not want to make so many pages XD Also found out you can style the details tag. Now if I could only find out if you can use the same CSS sheet for different grid layouts

[dravidious]

You're more amazing than lineart

You're more amazing than tag blocking

[sushiwt]

website update log #24 (April 13th, 2025)

I FINISHED RECREATING THE WEBSITE !!!

the look is more or less the same, with subtle differences and the removal of the image carousel (for now) BUT EVERYTHING IN THE HTML AND CSS FILE HAS BEEN CHANGED!!

i made a system for me to edit and add panels really easily, where i used classes for the panel design and reusable elements (ie “long-box” for really long elements like the github chart, and “three-boxes” for three panels in one row), and IDS for specific non-reusable elements like the navbar and the comment section.

now that editing the website became more flexible (compared to the previous version atleast), i FINALLY CREATED A GOOD LOOKING MOBILE VERSION OF MY WEBSITE WITH BOTTOM NAVBARS AND STUFF

i had a hard time making the previous version compatible to mobile, so it just doesnt look that great…

and besides the one before this, which looks really decent and actually mobile optimized,

it just gets worse and worse…

when i created these websites i never had “making it look great for mobile” in my mind at ALL..but when i found out how important it is for people to have a good-ish mobile experience, i gave it a try lol

ANYWAY!! NOW THAT THATS OUT OF THE WAY, LET ME SHOW YOU THE CHANGES IVE MADE TO THIS SITE YAYY!!!

- replaced the twitter feed panel to an “88x31 buttons ive made” panel

i made a whytee.xyz 88x31 button A YEAR AND A HALF AFTER I REDESIGNED MY WEBSITE

moved the under construction disclaimer from an overlay to its own panel

modified the "made by sushiwt" box by adding "built with firefox/chrome and vscode" and a "- 2025" beside the year

and i FINALLY made the artwork section for my website..

now all that's left is the section about myself, and this website is BASICALLY FINISHED!!!!

developing this website was so fun, and until i get the urge to remake it again, it will look like this for a while…

thank you for reading these logs btw :> i really really really appreciate you coming along for the ride (and by “the ride” i mean the creation of this)

- sushiwt <3

[codingquill]

Hey there,

I just wanted to drop a quick note to express how grateful I am for each and every one of you who has subscribed to my content and given it some love.

This is my secondary Tumblr account, and I'm still figuring some things out, especially when it comes to responding to comments. So, I would love a little help on that !

I'd like to give a special shoutout to @variablecemetery for their comment on my introduction post.

And to @mousiecat, who asked about CSS selector priority – Here's your answer

Adding a class like class="navbar" to a <nav> element in HTML, even if there is only one navigation element on the page, is a common practice in web development. This practice has several advantages:

Consistency: It helps maintain a consistent naming convention in your HTML and CSS. If you have multiple components or sections on your website that share similar styles, using classes can make it easier to manage and apply those styles consistently.

Reusability: If you decide to add another navigation element in the future, you can easily apply the same CSS styles to it by giving it the same class name (class="navbar" in this case). This makes your code more modular and reusable.

Specificity: CSS class selectors have a higher specificity than HTML element selectors. This means that if you ever need to style the element differently in a specific context or override other styles, using a class selector can give your styles higher priority without affecting other elements on the page.

Readability and Maintainability: Adding class names that describe the purpose of an element (e.g., class="navbar") makes your code more readable and understandable, which can be helpful when working on a team or revisiting the code later.

Documentation and Self-Documentation: Using class names like class="navbar" can serve as a form of documentation for your HTML structure. When someone else, including your future self, looks at the code, they can quickly understand the role and purpose of that element.

[izicodes]

Hi Loa! You said you started off with HTML/CSS/JavaScript, and you post a lot about your website projects. So I wanted to ask if you have any advice for the process of designing a website and making various graphics. I enjoy coding a whole lot, but I've avoided front-end stuff until now because looking into design and tools for it made me feel a little overwhelmed. What would you do if you were to start learning anew web design for your coding job and hobby projects? Thank you a lot :)

Hiya! 💗

I'd be happy to share some advice on designing a website and creating graphics. It's great that you enjoy coding and want to explore front-end development and design, and don't worry, though I love frontend stuff a lot, I still find some things overwhelming e.g. I'm currently learning Django which I have put off from learning because it looked "hard" but now I love learning it. Just give yourself a little push and you'll enjoy it! 😉🙌🏾

Web Design Inspiration

Two key places I get inspiration for my website designs are Pinterest and Behance!

For instance, when I was, and still am, researching Old Web GUI designs, I made a Pinterest board of images relating to what I wanted to design and I used that as a reference when building the design in HTML and CSS. So, I would look at the picture and think "Okay in terms of HTML elements and CSS styling, how can I replicate this? 😉👍🏾". You can check out these boards: board 1 | board 2

Pinterest is the main inspiration place, and Behance is for more in-depth web design components. What I mean is if I need inspiration for a navbar design or a certain card design, I would use Behance.

Now I don't particularly do this, which is bad, but I do recommend making a wireframe for your web designs. I talked about wireframes in a previous post, but to sum it up; wireframes are good because they allow you to stick to your design plans and not go off on a tangent. These are especially good when working in a team at work, for example.

The reason why I don't particularly do them as often as I should is because I see things in my head vividly enough that I won't forget where everything should be - no super power but that's the main reason I don't make wireframes. As well, I change ideas halfway through so there's no real need for me to keep making wireframes if I will change the design 2 minutes later! 😭💔

But that's just me, but you should totally start designing wireframes. Practising drawing up some wireframes will definitely help with being creative in your designs. Take everything around you as an inspiration. The way I think of it is to think like an artist who is capable of painting anything - all you have to do is look around and paint. You can do the same with web development - everything is an inspiration. I saw a person make a whole webpage with amazing graphics... just about water. You can do the same.

If you need help on that part, definitely look into graphic design. I took extra classes in Graphics (which was just graphic design) when in school which involved looking at graphic artists and studying their work, then replicating something with our own twist. You can do the same with web design - study websites online, some you like or random ones. Look at a piece of the website and try and replicate it. That's why I like projects which are like "make a Google clone" or "make a Netflix clone" because it gives you the chance to study other people's codes and you can keep that knowledge for any future projects!

And lastly, study web design principles. There are some principles that good websites all put into their design that make the user's experience good. Read this article about it and this should even give hints to how you could design your next website! Learn about fundamental design principles such as colour theory, typography, layout, and composition. Understanding these principles will help you create aesthetically pleasing and user-friendly designs.

Web Design Tools I Use

Now, what do I use every time I start a new "project", what online tools do I use? I literally have these on my browser's bookmarks, ready to go!

Pinterest (inspiration) - LINK

Behance (inspiration) - LINK

Coolors (colour palette generator) - LINK

CSS Gradient Generator (because I'm lazy) - LINK

Google Fonts (main source for fonts) - LINK

Font Palace (fonts I want but not on Google Fonts) - LINK

Font Awesome (for the little icons) - LINK

Image Colour Picker (if I have an image and I want to pick the colour from it) - LINK

Optional tools:

Bootstrap 4/5 (sometimes I use this for personal projects, definitely use it at work) - LINK

Pattern.css (creates a patterned background for you, again I'm lazy) - LINK

Storyset on Freepik (people graphic images) - LINK

Pexels (stock background and even fake product images) - LINK

Unsplash (same as Pexel) - LINK

LottieFiles (set animations) - LINK

TinyPNG (makes image sizes smaller so less space) - LINK

CSSmatic (4 cool CSS generators) - LINK

That's all I have to say, if I didn't help with your question, message me to help you further but I do hope this helps you!! Good luck! 🥰🙌🏾💗

[codenewbies]

CSS Flexbox Navigation Bar

[ne0nwithazero]

ur website is awesome where did you learn html and css!! ive been looking for months now but i cant find any starting points i can easily understand

Thank you! I kind of mostly used to do Neopets template junk in 2007 and had some extremely basic and outdated HTML knowledge until recently LOL (As in that my knowledge was basically knowing that <i> made your text italic and if I typed color="blue" it would change the color of the text haha)

But yeah, I'm basically self-taught! One of the courses I did in the past did have a few Web Design classes, but I had a really hard time understanding any of it and my grades were awful, so I hardly count that as having contributed anything to my knowledge x) (We were forced to make the most bland minimalistic corporate websites so the lack of fun in that definitely contributed hahaha)

I guess starting out really depends on what you're personally comfortable with? The way I personally started was that I used one of those Free Website Makers like Wix/Weebly/etc to try and "sketch" my website! I had this old unused !Weebly portfolio website I wasn't doing anything with, so I used that

W3Schools is the MVP for this stuff since it has basically everything you can learn about HTML/CSS/etc! For my Website I remember first starting by trying to create the navbar, looking at the Weebly mockup and trying to mentally deconstruct it all into boxes to try and understand how I could recreate it with my own code!

(The reason my navbar looks so different from the screenshot was because I had a really hard time recreating it xD And I ended up with something a lot more basic to match my skillset!)

Something that always worked for me was using templates and just trial and error my way into trying to understand what did what x)

Considering my website has the three-column format, I do recall using SadGrl's Layout Maker code as a reference for my own!

And I guess that's advice I can give?? Finding websites you like, or if you're wondering how someone did something, how their font has weird colours, what animations they're using, etc etc, just go look into their source code, or use the Inspect Tool (F12) and select elements to try and understand the code!

I do sometimes hide goofy hidden text and easter eggs in my source codes, so I'm personally cool with people looking through mine to understand how I did things :)

I definitely relate to this all being overwhelming or confusing at the start, so I'd say just take it slow and make things fun for yourself! I used weird fonts and bright colours when trying to see what does what, use dumb placeholder texts and images too LMAO

Another thing that helped was that I found gifs and images I liked to place on the website and try to make it feel all the more personal and cozy!

Again this is just my personal experience and what I did to make the learning experience more enjoyable :)

[codingflicks]

Responsive Navigation Menu

[divinector]

Responsive Navbar HTML CSS JS

[xtekker]

Day 3 even though its like day 5 or 6 of my website recode

Okay, so after that brief detour down "I'm not actually happy with this. Website navigation edition" and fundementally changing the entire navbar, I got back on track...

Projects tidy up:

Start of: (Kinda near the start but not really because I updated all the html for the page as well as all the Id's and classes for the css for this page already)

Changing all the css styling, adding new parent elements etc kinda broke alot of the styling on this page so I set about fixing it which was probably the easiest part of this.

Middle(ish):

At this point, I decided I was happy with this for now and moved on to snake.js. It was actually so bad, I'm not even willing to expose myself like that, buttttt, heres what I have now:

As you can see, there is a functional start and restart buttons, a "how to play section" and a leaderboard thats a WIP. There is also functioning food with an apple image, as well as a snake like image for its head.

This has been pretty fun, I experienced some issues working with the images at first but it wasn't really much, more so sizing issues like the aspect ratio of the food image no being preserved or the snakes head image taking up half the canvas element.

Tomorrow, I shall finish off the leaderboard for snake and begin to slightly polish the puzzle game, which is a drag and slide picture puzzle and the projects page.

[justadrunkenwhaler]

Foroactivo: ¿Creando una Skin?

Comenzaré diciendo que no conozco lo suficiente sobre Foroactivo (especialmente las plantillas) como para guiar a alguien en la creación de una skin. Estoy convencido de que haré un montón de locuras y habrá más de un diseñador aguantando las ganas de agredirme física y verbalmente. Por lo tanto, aunque esto pueda parecer un tutorial de diseño, no lo es. Se trata más de acompañarme mientras aprendo... a los golpes.

Ahora sí, a trabajar.

Pues... quiero diseñar una skin. Primero lo primero: necesito una temática.

Decidí ir por Fallout porque me gusta y también porque nunca he visto una foro de rol basado en esta saga. Así que nada, el primer paso fue un tiro al piso.

Ahora la paleta de colores, muy importante. Soy daltónico, así que lo último que quiero hacer es elegir colores por cuenta propia. Es por ello que visité un sitio muy nice llamado lospec en el que puedo encontrar paletas para pixel art. No tardé mucho en encontrar una que me gustase "Twilight 5" de Star y, tras crear las variables necesarias en un archivo de CSS, pasé al siguiente paso: ¿Por dónde carajos empiezo a codear?

Puedo encontrar un tutorial en Tumblr, otro por los foros de foroactivo (hehe) y... ¿ya? No sé, algo que no me gusta de esta plataforma es lo poco documentada que está. Lo único que se me ocurrió hacer fue ingeniería inversa.

Comencé inspeccionando el código de un foro recién creado para obtener las ids/clases del navbar y por el camino descubrí algunas variables de javascript que me fueron útiles más adelante. Tras una media hora de darme cabezazos contra el teclado, di con las "plantillas" del foro. Resulta ser que en:

Panel Administrativo > Visualización > Plantillas > General

Existe una plantilla en la que podía modificar la cabecer y barra de navegación del sitio. Esta plantilla es "overall_header".

El editor de texto de foroactivo es feo (siendo amable) así que ni en pedo iba a codear ahí directamente. Fui al vscode de mi pc, creé un archivo HTML, copié el código de foroactivo y tuve acceso a la plantilla con mayor comodidad.

Ahora que sabía de donde salía cada cosa, fue fácil conseguir la barra de navegación:

Acá empezaron mis problemas.

No quería trabajar ul y li, sino que deseaba construir todo desde cero. El problema es que esa porción de código llamada {GENERATED_NAV_BAR} genera sí o sí los links del menú en forma de li. Lo inteligente habría sido darse por vencido y trabajar con listas, pero soy terco así que opté por crear mi propio menú con juegos de azar.

Los elements del navbar no son más que enlaces con parámetros para específicar el tipo de acción, así que generar mis propios enlaces estuvo facilito.

Tuqui, tenemos enlaces. (Aunque esto volvería para romperme el culo más adelante).

Notarás que algunos enlaces tienen atributos llamados data-guest y data-auth. ¿Qué es eso?

Pues... el foro modifica la barra de navegación dependiendo de si eres un invitado o usuario registrado, así que debí replicar la misma funcionalidad. Estos atributos me permiten diferenciar los links a mostrar según que caso. Un poco de javascript y listo, problema resulto:

Acá puedes ver que utilizo una variable llamada _userdata, y es que foroactivo intenta arruinarte la vida si decides diseñar una skin, pero te da migajas para que no te rindas. Esta variable cuenta con varios datos útiles, en especial "session_logged_in" para determinar si el usuario está -o no- conectado. Acá el resto de los campos de dicha variable:

Así que listo, ahora contaba con una barra de navegación 100% funcional y acceso a los datos de mi usuario. Así que... ¿y si le doy una saludadita cuando se conecte? En este caso quería una pequeña sección en la parte superior izquierda de la pantalla que dijera:

"Bienvenido, Forastero" a los invitados

"Bienvenido, Nombre" a los usuarios conectados

Ambas vendrían acompañadas de imagen que sería el avatar para el caso de los usuarios conectados y una imagen por defecto para los invitados. Con eso en mente, me puse el overol y a trabajar.

Esta fue muy fácil. De nuevo, la variable _userdata contaba con los dos campos que necesitaba: username y avatar_link. Un par de clicks por aquí, typeo por allá y listo:

Un menú reactivo, tal y como me gusta. Finalmente, era el momento de abrir una botella de champagne y celebrar mi victoria, pero la realidad me pegó un batazo en toda la cara. ¿Qué pasa con los mensajes privados?

Mi barra de navegación funcionaba, pero no cambiaba en caso de recibir un mensaje privado. Acá no había variable que pudiera salvarme, así que tuve que resolver de una forma que honestamente no me gusta ni un poquito.

La barra de navegación original genera un span cada vez que el usuario recibe un mensaje privado, así que la respuesta estaba justo ahí. Solo debía chequear (con javascript) si ese span existía en el foro y, de ser así, ajustar mi barra de navegación para reflejar el cambio:

Creé una cuenta nueva, envié un mensaje privado al Admin y... listo!

Una vez más, la barra estaba andando. De nuevo, odio esta solución, así que si alguien sabe de una mejor alternativa, soy todo oídos.

Para el resto del día quería crear un tablón o, al menos, la estructura inicial, ajustar las fuentes y colores, agregar animación y poco más. Así que abrí fotochó, recorté al Courier de Fallout New Vegas, probé algunos prototipos y terminé de crear mi cabecera.

Acá un pantallazo de mi foro (so far):

¿Seguiré haciendo este tipo de contenido? Qcyo, puede que sí, puede que no. Todo dependerá de cuan frustrante me resulte la experiencia de diseñar una skin. Hasta ahora ha sido bastante sencillo, pero molesto en algunas secciones.

De cualquier forma, ¡gracias por leer!

— Yo soy el forastero y esta es mi marca.