Viewers: in countries Watching now:
Alright, so, how'd you do? Did you manage to change that pancake button to something different? Well, let me just remind you of what the code look like to start with, so this is 04_04.html, comes from your exercise files folder, copy and paste it on into your bootstrap folder and this was the original code here. So at lines 21, 22 and 23, these three lines icon-bar, icon-bar, icon-bar, those are the lines that are coding for the three lines that appear inside of that pancake bar.
So, all we need to do is just swap those out for something else. To make that pancake button to look different. So here I am in 04_05.html. This is my solution to the challenge. And if you scroll on down here to roughly the same area, I'm at line 21. I have swapped out those three bars. I completely removed them. And I swapped this out for two other things. I have typed in the word MENU, all in uppercase letters, and I've put in this glyphicon, so this is a span with a class of glyphicon, glyphicon-arrow-down.
So, hopefully what we're going to see, is a little arrow pointing down. In other words the menu's down here. And you're going to be able to click the word menu and have that appear. So if you save this and put this on into your browser, you will see, there's our navigation bar at the wider dimensions, as we make it smaller. You'll see here, the button is up here, but it's very, very difficult to read. So, remember, we wrote a style for Glyphicons many, many videos ago that turned all of them tan. So, you'll see that we have a tan arrow pointing down, here, and the word menu is here, although it may be very hard to see on your screen.
It's black on a very dark background. It worked, but now we need to, add a little bit of styling here. So that you can actually see the button. So that's the next thing I'm going to work on. In your Exercise Files folder you'll find a file called Additional CSS. There are some styles that I wrote to accomplish this so I'm just going to go ahead and just copy those from here and I am going to go to my custom style sheet, custom.css and down here toward the bottom I'm going to go ahead and put these in and I will tell you what they are.
So first of all, they all start with dot navbar-inverse. So, the issue is, if we had this navigation bar and we didn't use the inverse color scheme, all of this would work great. So, probably the first thing I ought to show you is this. In our navigation bar here, in our HTML. If I just take out the class of navbar-inverse from lines 17 and just leave it as navbar fixed top and I save this and I refresh my webpage. Now I have a white navigation bar, that menu button works just fine, you can see it's just fine.
So the styles that are there are all present and accounted for and working just fine. It's the inverse that is causing the problem here. So, and I'm going to put that style back on in here because I really do want it black. So for the nav bar inverse, first of all the nav bar toggle class. I've set the text to be white, bold and have a white border. And once again on the inverse navigation bar, when you hover over that toggle, I've set the background color to be a light grey with black text. So we're going to start with a black button with white text, it'll go to a light grey button with black text.
And then I styled the glyphicon here specifically to be white when it's not hovered over. And the very dark gray, again, when we do hover over it. So having added these styles, now, when I refresh my webpage, now you can actually see the menu button here. And when I hover over it, it turns that lovely light gray color. And my text turns black. So that works really, really well. It's very obvious. And I think, in some ways, that, actually, this works better as a button than the pancake button. Although the pancake button seems to be this emerging standard. So hopefully, you managed to make your pancake button look a little bit different, and congratulations.
Find answers to the most frequently asked questions about Up and Running with Bootstrap 3 .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
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.