Bootstrap 5 Transparent Navbar with Full-Screen Image Background

Показать описание

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). I'll help you master the latest tech here:

👉 Discord: all my courses have a private Discord where I actively participate

0:00 Overview
1:25 Adding background image
3:35 Adding navbar
5:18 Making navbar transparent

#bootstrap5 #bootstrap #bootstrapnavbar #bootstraptutorial #webdevelopment #coding #programming

ByteGrad

Рекомендации по теме

Комментарии

I watched multiple tutorials and could not get to a solution on this topic. You made it easy and very clear to be understood. You earned one more subscription to your channel and excited to check more of your videos. Great job !!!

eowhvhe

Thank you. The most useful tutorial (among those which I came across) on how to get this done

andreyfomin

Great video, I give it a like and subscribe!

jakubklewicki

Thanks, working with chakra ui on react. The -1 z-index and position absolute really helped.
Ps: Used a video as background

digitalwhiz

That was a very helpful tutorial. Thank you. Keep up the good work :)

zinebtlaiha

Awesome bro, thanks for the wonderful tutorial.

SunnyKumar-lvir

This worked for me, except now any content I place on the page shows up immediately below the navbar. How do you tell begin to add content below the image?

kcdrh

I have content below the image, when I give the image postion absolute and take it out of the flow rest of the content comes up (ifywim). The image is treated as it does not exist and so does its space. I end up having a chaotic looking page. I can make an empty div and give it height 100vh or something equivalent to that of the image but that is tedious. Is there no other way?

zehran