Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,149,895 members, 7,806,617 topics. Date: Tuesday, 23 April 2024 at 07:09 PM

To Bootstrapers, How To Customise The Navbar Component: A Short Class - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / To Bootstrapers, How To Customise The Navbar Component: A Short Class (534 Views)

Help! Blogger Blog Navbar Menu Not Showing On Mobile / Bulksms Component With Different Routh Options At User End / Is Afrisofts SPC4 Bulksms Component Trashy? (2) (3) (4)

(1) (Reply)

To Bootstrapers, How To Customise The Navbar Component: A Short Class by dwebdesign(m): 8:54am On Sep 29, 2015
Morning, i just want to teach few that may need this tutorial, how to customise the bootstrap 3.x navbar component. what makes you different is your ability to customise the bootstrap 3.x components.

so lets start.

after linking to the bootstrap minified css file in your html document head tags,

create a new css file and call it custom.css or any name you want.

find the location of the css file your just created and link it up in your head tags like this

<link rel="stylesheet" href="PATH TO THE CUSTOM CSS FILE" />

Now open your body tags
<body>
<!--declare your navbar-->

<nav class="navbar navbar-new">
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</div>
</div>
</nav>



</bod>


NOW, go to your css custom file,

and write,

.navbar-new{
background-color:#000080; /* or any color you want */
border-radius: 0 !important; /* to remove the rounded corner that comes with the bootstrap default navbar style*/
/*YOU CAN SPECIFY OTHER PROPERTIES AND VALUES*/
}

if you want to customise any other boostrap components, follow this pattern too.


hope this helps.

Am a boostrap 3.x Expert, I craft awesome UI for web apps.

contact for further talks.

(1) (Reply)

Registration Not Working On Mobile. Please Help Confirm / Blogsite Designer / Bulk Sms Menu

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 10
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.