• Saturday , 11 July 2020

Customize Navbar Bootstrap 4 tutorial 2018

Code Canyon

In this video, I’m going to tell you how to customize bootstrap 4 navbar.How to change the background color, font color, and toggle button. how to change orientation.


CSS code for this program:

.my-nav{background-color: forestgreen;}
.my-nav .navbar-brand{color: aliceblue;}
.my-nav .navbar-brand:hover{color:aquamarine;}
.my-nav .nav-link{color: aliceblue;}
.my-nav .nav-link:hover{color: aquamarine;}
.my-nav .dropdown-menu{background-color: lightpink;}
.my-nav .active{background-color: green;}

/*.custom-toggler.navbar-toggler {
border-color: rgb(255,102,203);
.custom-toggler .navbar-toggler-icon {
background-image: url(“data:image/svg+xml;charset=utf8,%3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(255,102,203, 0.7)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”);

.navbar-toggler-icon{color: white;}

You can also see this video for :

customize navbar bootstrap 4
navbar bootstrap 4
customize navbar bootstrap
customize navbar color bootstrap
customize navbar bootstrap 3
bootstrap navbar color change
bootstrap navbar color schemes

my another video links:
Bootstrap 4 progress bars: https://youtu.be/tQpUUOZQhKs
How to customize navbar – bootstrap4 tutorial – https://youtu.be/PRMtNdlSpzY

Bootstrap 4 Tutorial – Responsive Navbars – https://youtu.be/hj_ayO9P3R4

Google Penguin Update and Penguin Recovery Process in 2017 – https://youtu.be/MrKHpS588Fs

Google Panda Update AND Recovery Process from Panda – https://youtu.be/OzZq-nmonaU

how to add the numeric counter on a website- https://youtu.be/AQYv14sY_q8

How to find best Profitable keyword for Your Website 2018 part 1- https://youtu.be/QdMMfSwU15M

How to find best Profitable keyword for Your Website in 2018 part2- https://youtu.be/t3hHUA5KiQI

Introduction To Keyword Match Types In Google AdWords 2018- https://youtu.be/Re3rfgYdkG8

Bootstrap 4 tutorial – card : https://youtu.be/qIPdaBIQXtg

Bootstrap 4 card slider- https://youtu.be/mglq2tBjRxk
bootstrap 4 testimonial – https://www.youtube.com/watch?v=gbNhlAoHQkI&t=793s
Transparent navbar with full-screen background image landing page-Bootstrap https://youtu.be/SvpyyIE5vG0
Bootstrap Transparent menu with Responsive Slider – https://youtu.be/2vSc6VJtz4s
How to Create Mega Menu with Bootstrap 4 with CODE: https://youtu.be/932hSm1yNII
How to create Responsive LightBox Gallery with Bootstrap 4: https://youtu.be/k-RtYiiB47E
How to customize owl carousel slider navigation 2018 with Bootstrap: https://youtu.be/nVNv1jUitCk
scrolling effect on Navbar -bootstrap 4 tutorial: https://youtu.be/cskDxDRD1Kw
bootstrap 4 dropdown on hover – Bootstrap 4 tutorial: https://youtu.be/2vwrwrMd1NM

Original source

3d Ocean

Related Posts


  1. ahmad ali
    November 21, 2019 at 16:41

    Thank you brother

  2. suchetan dey
    November 21, 2019 at 16:41

    Good Explanation …. 🙂

  3. Adithep Pruekpitakpong
    November 21, 2019 at 16:41

    Thank you. This is COOL!

  4. Santosh Jadagoudar
    November 21, 2019 at 16:41

    One like for showing the navbar-toggle trick! Thank you!! XD

  5. wbhauck
    November 21, 2019 at 16:41

    Thank you!

  6. Morris R.
    November 21, 2019 at 16:41

    How to make a skinny navbar? thanks

  7. Taison Anonymous
    November 21, 2019 at 16:41

    Hello friend thank you for helping me out! the lesson is very high quality!!!!!!

  8. Avatarland
    November 21, 2019 at 16:41

    Could you tell me, how to make transparent navbar in boostrap 4?

  9. Ferenc Cziryek
    November 21, 2019 at 16:41

    Hi Iwould like to change navbar height from 50 to 60px that can affect toggle. can you help me to make it ?

  10. Rajesh Kumar
    November 21, 2019 at 16:41

    Dear sir you are awesome…………no words. keep up the good work i will follow you tell become a complete website developer and when i will get the job i will tell everybody where i learnt bootstrap……….thanks again sir good night

Leave A Comment

You must be logged in to post a comment.