Responsive Navigation bar Using Bootstrap | Modern Web Design tut_001


Welcome guys , How about making a great website. I am not talking about content. Except content the things that matters most is , how you are showing or providing that content. Is it user friendly or not. Web Design is all about, clear the idea of the user, where to go. SO Today
We are going in a Responsive web design world. What is Responsive web design. Let’s look at definition . Responsive web design is about creating web sites which automatically adjust in all devices to look better. For this we use Bootstrap.
Why ? Well … Easy to use , Responsive , Mobile first approach, blah, blah, blah ok Well … Easy to use , Responsive , Mobile first approach, blah, blah, blah So today, we will make a responsive well user friendly web design like this In the navigation bar we clearly see where to go
and brand logo Main image or what we call it , Hero image clearly says where you are.. Is it responsive
Well , look , how it will look like in mobile devices ? Navigation bar items disappeared but
an icon bar button is appeared Let’s click on button Here is our items Ok , I hope you got it , what we are going to do
Let’s start.. First thing open Dreamweaver or whatever software you use for web development Create new html file , save it by pressing ctrl + s
somewhere on your computer in a new folder . Write a title First we need to know how to use bootstrap
Here we need three files Either we can download them or we can directly use the links By using links you can’t edit these files because they are somewhere on the server To customize these files you have to download these files We will edit only bootstrap.min.css for others we are using directly links Download bootstrap Extract it. Put this folder into the same folder as saved html. We are going to use the file bootstrap.min.css I hope know how to use a css file in html In the head section Use link tag for external css files Use relation rel is stylesheet
Reference is the path of your css file Type is text css Close the tag. Now write other two files code as a link Because we are using a server files so we need internet to load these files Till now we have done the setup of bootstrap
Let’s make a navigation bar In the documentation of navigation bar you can get the idea of what it will look like There are navbar-default and navbar-inverse we are you can use any one You can read more about this on this page links are below in the description Let’s use navbar -default navigation bar
Copy it and paste it into html body section These navbar, navbar-default and container-field all are standard and defined in bootstrap.min.css Define role as navigation Let’s edit the items and add some more If we see the preview by pressing f12 It’s not what we want
We want items in the center And in the mobile mode it’s not working properly
So let’s solve these problems. First let’s make the icon bar button for mobile Define item’s div tag class as navbar -collapse and collapse Add a button Instead of this we add a button type button class navbar- toggle data-toggle is collapse And data target is navbar -collapse close tag Now add three icon-bar by writing span class icon-bar three times and copy paste it Close the button tag
That’s our button Now solve the center problem For this we create a new css file save name style.css inside a new folder name css Now link this file into our html relation stylesheet reference path of the file type text/css We are using navbar -default that has float value left We have to change float value to none That we can do easily copy it and paste it on our style.css file Now see the preview by pressing f12 That’s working perfectly But in the mobile mode I want all these items in the left side Like this So let’s put that condition do it if minimum width is 768px @media (min-width: 768px) close it in bracket See preview by presing f12 looks good But I want to customize the navbar text and background To change the navbar -default background go to bootstrap.min.css and search navbar-default You will find this change its color’s value whatever you like But if you believe in google guideline that can help your designing Go to google design style and colors there are standard values of colors that we should use Try out some colors I’m going to easy black and white Background color value #616161 same for border Now item’s text color This is how we go to these links navbar -default to navbar-collapse to nav to list to link Let’s do it For class we use dot and for id we use hash So .navbar-default inside this .navbar-collapse to .nav to list li to link a And define styles
Color for text Write what you like for spacing margin-left 10px and same for margin-right and font size 16px Try whatever value you like Now let’s define hover and focus effect for items Use the same path colon hover and same style for focus you can define different for both of them Text color change into slight darker BDBDBD if you want to change item background color you can define here background color slight darker then bar background #424242 like this Save it and see the preview by pressing f12 that’s cool working perfectly In the next Tutorial we will add a hero image like this. A Brand Logo that will appears in the navigation bar And a Favicon that will appears in the browser bar If you find it difficult or fast or I miss any things that should be explain more Let me know in comment section Feel free to give suggestion and ask any quires . Thanks foe watching now it’s your turn to do it .. See You Soon In The Next Tutorial.

4 Comments

Add a Comment

Your email address will not be published. Required fields are marked *