Tutorial: Dynamic Search Bar

FULL HTML AND CSS CODE AT THE BOTTOM IF YOU WOULD LIKE THE COPY IT.

Step 1.

Make a div in your html body part. this is the basic search bar.

There is only 1 more thing to do, we are going to use a magnifying glass symbol for the search bar. We use the symbol from the site fontawesome. Make sure to put the highlighted text (the symbol code) in your head tag of your html file!

That's everyting we need to do in our htlm file. Now we are going to style this search bar :). Open up a new css file!

I'm going to show you how to make a Dynamic seach bar in the top right, you can change the styling to get the seach bar perhaps in the middle of the screen. ( full css file at the bottom, for the search bar top right and in the center of your screen).

Step 2.

We begin with the styling/position of the search box! On photo 2 we are going to style the hover options on the search box! this means when you are hovering your cursor over the search bar!

1.

2.

Now we are going to style the magnifying glass symbol and position it!

This is the last step, we are going to give the magnifying glass a color, i chose for red. We are also changing the line height of the placeholder text to the right height and some transitions.

Congrats, you created your own dynamic search bar !

FULL Codes: ( search bar in the middle and your screen and top right)

html link
CSS link search bar top right
CSS link search bar center of screen