HomeЛюди и блогиRelated VideosMore From: Code Explained

Customize Bootstrap 4 NAVBAR | CSS only

231 ratings | 26516 views
The background image : https://goo.gl/ULB5SA CSS code : .mynav{ background-image: url('../img/bg-nav.jpg'); height:500px; } .navbar{ background-color: transparent !important; } .navbar .navbar-brand{ color : #FFF; font-weight: bolder; font-size: 1.3em; } .navbar .navbar-nav{ margin : 0 auto; } .navbar .nav-item a{ color: #FFF !important; } .navbar .dropdown-menu{ background-color: rgba(0,0,0,0.3); } .dropdown-item:hover{ background-color: rgba(0,0,0,0.3); } .navbar form button{ background-color: #ea00b1; color:#FFF; border:0; } .navbar form button:hover{ background-color: #000; }
Html code for embedding videos on your blog
Text Comments (42)
Md. Pial Ahamed (4 months ago)
5:23 when you did paste what shortcut you have used?
Code Explained (4 months ago)
CTRL + V
Hamza Arshad (5 months ago)
it's a good tutorial but the click sound is too annoying.
Code Explained (5 months ago)
Sorry.
Tarun Bhola (5 months ago)
Hi... it was really helpful. I need to know how to select multiple classes to style a component. Like you did .navbar .navbar-brand {color:white;}. What is the logic of selecting the class like this? Can you please give a tutorial on this? I need to understand how it works and how to select and style multiple elements?
Code Explained (3 months ago)
press down CTRL on your keyboard, and keep selecting classes you want, without releasing the CTRL key.
Sidheek K (6 months ago)
thanks for sharing, how can i make right align the navigation
talha tahir (7 months ago)
ur sound ? r u ill?
Code Explained (7 months ago)
Poor mic, sorry
LariSouza (8 months ago)
OMG YOU SAVED THANK U
YouKnowWho (8 months ago)
$1 mouse
Code Explained (8 months ago)
Here is my PayPal account : [email protected] Do what you can, to change the "$1 mouse".
Pro Style (8 months ago)
what editor you use ??
Code Explained (8 months ago)
brackets.io
Dream Land (10 months ago)
Its only run html file... I want to run PHP file
Code Explained (9 months ago)
include the files into your PHP file.
shizuka red (9 months ago)
just rename your file to .php lolsss
Dream Land (10 months ago)
Tell me the software whr we see live changing on website while changing in css
Code Explained (10 months ago)
brackets.io by Adobe
Dream Land (10 months ago)
Which software it is ???
Minhco nguyen (1 year ago)
You're just amazing
Oskar Ceso (1 year ago)
how can you upload a video with such loud click noise?
Code Explained (1 year ago)
I'm really sorry bro. that's one of the first videos I made, and I didn't know much about everything.
Mohammad Reza Asadi (1 year ago)
Very Nice Work Thank you for this awesome Tutorial
Usman Dar (1 year ago)
You are awwesome Brother...
Kiranjit Misra (1 year ago)
Very good tutorial
Code Explained (1 year ago)
Kiranjit Misra thanks
Allie Teaches English (1 year ago)
Thank you for this short, but very helpful video! Some of the other videos were over an hour long just for something you did in 10 minutes :)
Code Explained (1 year ago)
happy that the tutorial helped you out :)
Rongmei Online (1 year ago)
how can i makes the background img responsive? using the css background-image: url(img);
Code Explained (1 year ago)
CSS Media Queries for Desktop, Tablet, Mobile : https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
Code Explained (1 year ago)
change the image size using Photoshop or any other software you use, and then use : CSS MEDIA QUERIES. /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /********** iPad 3 **********/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* iPhone 5 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6 ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6+ ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S3 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S4 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } /* Samsung Galaxy S5 ----------- */ @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ }
Bilal Khan (1 year ago)
Thank you very much for helping me by making this tutorial
Code Explained (1 year ago)
you are welcome
Roberto Moreno Ortiz (1 year ago)
The "click" sounds are so loudy. It bothers.
Code Explained (7 months ago)
Sorry Eva, this video was one of the very first videos I uploaded, I had a poor mic, and also I didn't take in mind the clicking sound, but after the comments above, all the next videos hadn't this problems.
Eva Bijker (7 months ago)
@Code Explained i dont think that the clicking is the problem. i think that you just need to make your vioce(over) louder, because i cant hear your vioce unless i turn the volume on its loudest and because of that the sound like the clicking become also louder☺
Code Explained (8 months ago)
Thanks a lot.
T1ЯO ヅ (8 months ago)
and this is how i want both parties to communicate with each other, no salt no tears, pure professionalism! also i subscribed and liked your vid, Great Job, keep up the good work!
Code Explained (1 year ago)
Your English is okay, and I really thank you for your advice. I appreciate that.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.