React Headers with Bootstrap - examples & tutorial

Headers are compositions that extend standard navbar functionalities. They contain additional components like a jumbotron, sub-navbar, or image covers which ... Headers ReactBootstrap5Headerscomponent Headersarecompositionsthatextendstandardnavbarfunctionalities.Theycontainadditional componentslikeajumbotron,sub-navbar,orimagecoverswhichserveasacontainersforextra navigationelements-usuallylinks,forms,orcall-to-actionbuttons. Jumbotron Ajumbotronisalightweight,flexiblecomponentthatcanoptionallyextendtheentire viewporttoshowcasekeymarketingmessagesonyoursite. Showcode JSX importReactfrom'react'; import{ MDBNavbar, MDBNavbarNav, MDBNavbarItem, MDBNavbarLink, MDBNavbarToggler, MDBContainer, MDBIcon }from'mdb-react-ui-kit'; exportdefaultfunctionApp(){ return(

Home Features Pricing About Heading Subheading Calltoaction

); } Backgroundimage Headerwithbackgroundimagemighthelptooutstandyourcalltoactionelementsbycatching theeyestosomebeautifulimageinthebackground. Toprovideapropercontrastit'shighlyrecommendedtousea mask.Youcanchangethecolorandthe opacityofthemaskbymanipulatingRGBAcode. Youalsomustsettheheightofthebackgroundimage,otherwise,the componentwillcollapse.Intheexamplebelow,wesettheheightto400px. Weuseflexboxutilitiestocenterthecontent verticallyandhorizontally. Showcode JSX importReactfrom'react'; import{ MDBNavbar, MDBNavbarNav, MDBNavbarItem, MDBNavbarLink, MDBNavbarToggler, MDBContainer, MDBIcon }from'mdb-react-ui-kit'; exportdefaultfunctionApp(){ return(

Home Features Pricing About

Heading Subheading Calltoaction

); } Ifyouneedtosetadifferentheightofthebackgroundimageforlargeandsmalldevicesit's bettertosetitviaregularCSSinsteadofinlineCSS. Intheexamplebelow,wegiveitanid="intro-example"andsetaheightof 400pxforsmalldevicesand600pxforlarger. Showcode JSX SCSS importReactfrom'react'; import{ MDBNavbar, MDBNavbarNav, MDBNavbarItem, MDBNavbarToggler, MDBNavbarLink, MDBContainer, MDBIcon }from'mdb-react-ui-kit'; exportdefaultfunctionApp(){ return(

Home Features Pricing About

LearnBootstrap5withMDB Best&freeguideofresponsivewebdesign Starttutorial DownloadMDBUIKIT

); } /*Defaultheightforsmalldevices*/ #intro-example{ height:400px; } /*Heightfordeviceslargerthan992px*/ @media(min-width:992px){ #intro-example{ height:600px; } } Fixednavbar Youcanstickthenavbartothetopofthewindowbyusing .fixed-topclass.Thankstothiswheneveryouscrollthepagethenavbarwillbe alwaysvisible. Fixednavbarsuseposition:fixed,meaningthey’repulledfromthenormalflowof theDOMandmayrequirecustomCSS(e.g.,padding-toponthe

)topreventoverlapwithotherelements.Intheexamplesbelow,we addmargin-top:58px;(heightofthenavbar)tothejumbotronandbackground imageforthispurpose. Home Features Pricing About Heading Subheading Calltoaction Scrolldown Scrolldown Scrolldown Scrolldown Scrolldown Scrolldown Scrolldown Scrolldown Showcode JSX importReactfrom'react'; import{ MDBNavbar, MDBNavbarNav, MDBNavbarItem, MDBNavbarLink, MDBNavbarToggler, MDBContainer, MDBIcon }from'mdb-react-ui-kit'; exportdefaultfunctionApp(){ return(

Home Features Pricing About Heading Subheading Calltoaction Scrolldown

Scrolldown

Scrolldown

Scrolldown

Scrolldown

Scrolldown

Scrolldown

Scrolldown

); } Home Features Pricing About Heading Subheading Calltoaction Scrolldown Scrolldown Scrolldown Scrolldown Scrolldown Scrolldown Scrolldown Scrolldown Showcode JSX importReactfrom'react'; import{ MDBNavbar, MDBNavbarNav, MDBNavbarItem, MDBNavbarLink, MDBNavbarToggler, MDBContainer, MDBIcon }from'mdb-react-ui-kit'; exportdefaultfunctionApp(){ return(

Home Features Pricing About

Heading Subheading Calltoaction

Scrolldown

Scrolldown

Scrolldown

Scrolldown

Scrolldown

Scrolldown

Scrolldown

Scrolldown

); } Animatednavbar Youcanachieveaveryimpressiveeffectbyusingouranimatednavbar,whichistransparenton start,andchangethecolorafterthescroll. Clickthebuttonbelowtoseethefull-screendemo. Fullscreendemo Showcode JSX importReactfrom'react'; import{ MDBAnimatedNavbar, MDBContainer, MDBNavbarToggler, MDBIcon, MDBNavbarNav, MDBNavbarLink, MDBNavbarItem, }from'mdb-react-ui-kit'; exportdefaultfunctionApp(){ return( <>

Home LearnBootstrap5 DownloadMDBUIKIT

Thisistitle

Loremipsumdolor,sitametconsecteturadipisicingelit.Officiismolestiaelaboriosamnumquam expeditaullamsaepeipsam,deseruntprovidentcorporis,sitnonaccusamusmaxime,magninullaquasi isteipsaarchitecto?Autem!

{''} Loremipsumdolorsit,ametconsecteturadipisicingelit.Nobisquamminimaperspiciatiseostenetur. Praesentiumdoloresatquosaperiamsed,sintprovidentconsecteturincidunt,nostrumporroearumcommodi,ex architecto.

> ); } Ifyouwanttocustomizethecolorsintheanimatednavbaryouneedtooverwritethefollowing styles. Note:Thesearethedefaultsettings.Ifyoudon'twanttochangeanything thenyoudon'tneedtoaddormodifythefollowingcode. Showcode SCSS /*ColorofthelinksBEFOREscroll*/ .navbar-scroll.nav-link, .navbar-scroll.navbar-toggler-icon{ color:#fff; } /*ColorofthelinksAFTERscroll*/ .navbar-scrolled.nav-link, .navbar-scrolled.navbar-toggler-icon{ color:#4f4f4f; } /*ColorofthenavbarAFTERscroll*/ .navbar-scrolled{ background-color:#fff; } /*AnoptionalheightofthenavbarAFTERscroll*/ .navbar.navbar-scroll.navbar-scrolled{ padding-top:5px; padding-bottom:5px; } Introduction Jumbotron Backgroundimage Fixednavbar Animatednavbar Accessrestricted ToviewthissectionyoumusthaveanactiveMDBProaccount Logintoyouraccountor purchaseanMDBProsubscriptionifyouareanewuser Login BuyMDBPro Close