Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have the cert form in place, and it's styled the way we want, we need to add that search loop icon on the far right-hand side here, so we can toggle the search form on and off. For that I'm going to use another icon from Font Awesome. This search loop and this time I'm going to insert it the way Font Awesome recommends, by using and i tag. So you see here, if I copy this code, I can insert an icon. But, what you're seeing is what I'm actually doing is just putting an empty i tag that has the fa and fa search classes.
And then you remember that what font also does is it used the before pseudo elements to inject the icon in before the content. So we're actually not placing anything in the page, we're just tricking the browser into displaying an icon that really isn't there. So I'm going to copy out this class here and then I need to open my header.php file, because it's going to be in the header. And here I'll scroll down and figure out where I want to place the icon. Now here we already have the nav menu, which is the main menu, and we have our social menu.
And I'm going to place the icon right in between the two and I'll explain why in a couple of minutes. So first, I'm just going to test whether the icon works by just pasting in the code from Font Awesome. And saving header.php. Now I can go and reload my page here and you'll see my icon appears over here but it's wrong. Now it's the wrong color it's positioned in the wrong place and it just doesn't work. Now I need to change the appearance of my icon using some styles, and for that I need to wrap the icon in a container so that I can target it with my styles.
So if you go to the code snippets for this movie you'll see here I have a code snippet for header.php. So I'll copy that out and replace this tag with my code snippet. And if we look at it, you'll see it starts with a divider that contains my icon and then I also added a link. This link targets the search container ID, which is the search container down here, and it has the screen meter text class applied so that link is hidden. It also displays the text search and it's marked up so that a translator can translate it later.
The reason why I want to provide this link is if someone is using a text to speech browser or navigating with a keyboard or something like that, they won't actually be able to access this icon. Because, as I mentioned before, this isn't actually content. It's an empty tag with nothing and then CSS is causing the icon to appear. So by adding the link we're providing real content to target if your using a different interaction method. Now that I have my icon wrapped in the search toggle class, and I have the text that's been hidden with the screen reader text class, I can add some style to my icon so I'm going to go to style dot T-S-S.
And here I am gong to navigate down to the header again, so I'll go x.x, and find the header, and scroll past until I find the search section. So here we have a header search, and I'm going to add my new styles above the search forum because the icon up here is above the search forum in the markup. I'll go back to my code snippets. And first I'll copy out the two first rules, and I'll paste them in. Now these two rules, the first one targets search goggles, so the container that wraps around the icon, it floats it to the right.
It sets a width and a height so that it matches the size of the other icons on my main menu. It sets the padding, so the icon is in the middle of the container. And it also sets the color so that the icon looks good. And finally it changes the cursor to a pointer because like I mentioned the icon isn't an actual item, so when you put your cursor on it, it's not actually something you can click on. So by setting the cursor to pointer, I'm tricking the browser into behaving as if it was clickable. Then I have another selector called search toggle hover, and search toggle active.
And all this does is it adds that grey background, so when we hover over the icon, it gets the gray background as if it's active. I'll save my new styles, reload the page, and now you see the search icon appears here on the right hand side and it behaves just like the other buttons and now I can also show you why I placed a search icon. In the middle, in between the two menus. If I resize the screen here, you'll see that when I get to a certain point, the social menu drops down, but I want the search icon to appear on the righthand side of the top for as long as possible.
So by placing it in between the two items, the social menu drops down, but the search icon stays. This is purely for me, so if you want to change it that's fine. It's just some thing that I personally think should work this way. But if you look closely now, you'll see there is a small error in my site, because I am able to scroll to the side. And this is actually a problem that's been present ever since we started the project. And what's happening here is the hidden text that's applied to the search icon that says search, is spanning beyond the edge of the content and is pushing the browser out.
And this is due to what I think is an error in the underscore style sheet. So what we need to do before we can do anything else, is fix that error. So I'm going to go into the style sheet here, and I'm going to search for the class that hides the text, which is screen reader text. And here you see the screen reader text class currently says clip and position. So I'm going to add one more item here. I'm going to say write 0. And that forces anything that's displayed with a screen reader text or hidden with a screen reader text, to jam to the right hand side of the container.
That means it'll never spill beyond the edge of the browser window. So when I save this and reload my page, you'll see that the scrolling bar at the bottom disappears, and now I don't have that arrow on my page anymore. Now there's only one thing left to do. I need to re-size my screen and see what happens when we get to a smaller screen. And again just like with everything else, you see that when we get to that six hundred break point my new icon drops down and behaves funny. So here again we have to add a media query.
So I'll go to my code snippets for one more time. And here at the bottom I have a media query. So I copy out the media query, go to the style sheet, and here I need to find my search toggle again. And then I will paste in the media query directly below search toggle hover. Go back to the browser, reload the page one last time. And then scroll in, and you'll see now the search item will appear at the top when we are on smaller screens. So now, we have the two pieces we need.
We have the toggle button, and we have the search form. And all that's left is to hide the search form, and then show it when we click on the toggle button.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.