FREELessons: 12Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Resets, Logo, and Navigation

In this lesson we’ll start fleshing out the homepage and learn how to use Bootstrap’s navbar component to place a logo and some responsive navigation on our homepage.

Related Links

3.2 Resets, Logo, and Navigation

Welcome back to Power Up Your Portfolio With Bootstrap. I'm your instructor, Cory Simmons. In the last lesson, we learned how to set up Bootstrap with HTML5 boilerplate. We're off to a great start, but let's keep it up by adding in Bootstrap's Navbar component and styling it up a bit to match the theme idea we have in mind. First, let's navigate to and click on Components. Once there, scroll down to the Navbar section. This is Bootstrap's Navbar component. It's a really nice way to quickly and easily set up a navbar that's responsive and condenses down into a hamburger menu for smaller devices. I've found that if I ever try to write this markup out myself, I mess it up. So I've learned to simply copy and paste the markup straight from documentation into my site. So let's do that and refresh our page to see it. [BLANK_AUDIO] Voila. You just added your first Bootstrap component to a site, and now we have a navbar. Now, let's style this navbar to go with our dark, minimalist theme I have in mind. So, open up the CSS folder in our project root, and you'll see a main.css file that houses a generic CSS reset. Ignore that, and create a style.css file in the same directory. At the top of this style.css file, let's import our main.css file by typing @import 'main.css'. So our reset loads before any of the styles that we're about to add. Switch over to our index.html and change the stylesheet link tag to reference our new style.css file rather than main.css, and we should be good to go. Now let's set the HTML's background color to a nice off-black of 222. Save and refresh, and you'll notice the background color is still white. If we inspect, we can see that Bootstrap has assigned body selector a background-color of white. So we can override that by saying body, background, none. Save and refresh, and now our background's working. I've made an abstract SVG image to go on our background as well. [BLANK_AUDIO] So let's add that to our background CSS rule, and position it in the bottom right of the page, and not repeat it. [BLANK_AUDIO] We'll set the height of our HTML selector to 100% to make sure that background image is always visible, and set its background-position to fixed to make sure it never scrolls with the page, or rather, just stays in the same position. While we're here, let's also set the HTML selector to have an overflow-y of scroll. This will create a vertical scrollbar on our site that will pr, that will be present no matter what. This prevents the layout from seemingly bouncing about 20 pixels horizontally if the user's on a page that has a scrollbar, and then visits a page that doesn't have a scrollbar. By setting the scrollbar to always be present, it won't matter if there isn't enough content on a particular page to generate a scrollbar. Also, as long as we're modifying the body selector, let's add a line-height of 1.5 to it, and set its font color to a nice off-white of F5F5F5. I'd really like to use a nicer font for our site than the default, so navigate to Google Fonts and look up Source Sans Pro. Check the boxes for Light 300, Normal 400, and Bold 700, so we have some different font weights accessible, and scroll down to step three. Then click on the @import tab and copy the code, then paste it to the top of our stylesheet, right underneath our import for main. Now we can set our body selector to have a font-family of Source Sans Pro with a sans-serif fallback, and fonts throughout our site will look a lot better. As long as we're importing new fonts, I know I'd like to have a big, fat, decorative font for my headers. So let's look up Abril Fatface on Google Fonts, which only comes in one weight, and grab its at @import code too, and place it directly underneath our other font import code. Now, write out a selector for each header tag, h1, h2, h3, h4, h5, h6, and set its font family to Abril Fatface, with a cursive fallback. While we're here, let's get rid of the pesky top margin on header elements with margin-top 0. As long as we're setting margins to typographic elements, let's set our paragraphs to have a margin-bottom of 1rem. Now that we're done with our general reset, here comes the tricky part, overriding Bootstrap's defaults. Basically, all Bootstrap components come with some default styling to make them look decent, even if you just drop them into your page. So, if you ever want to change their styling, you'll need to whip out Inspector and sift through elements until you find the element that needs overriding. And them simply copy its exact selector to your personal CSS and override it. Since our CSS file comes after Bootstrap's CSS file, Bootstrap's CSS will be applied, and then our CSS will go over it and be reapplied, and win out. First, let's remove some of these default stylings by simply removing the class navbar-default from our markup. While we're here, let's change the name of our page from Brand to Icebreaker, to go along with our abstract iceberg background, and as a clever way to say, hello, welcome to my portfolio. And also while we're here, let's get rid of all these links and dropdowns and replace them with some basic links that we can use throughout our site. [BLANK_AUDIO] Now, I know I want these links to be bold, and I want their text to be that light color all our other text is. So I'll right-click on the brand link and Inspect Element on it. I can see that it has a class of .navbar-brand. So if I copy that selector to my CSS, now I can change the color to F, F5F5F5, and the font-weight to bold. Refresh, and voila, we've just overrode our first Bootstrap component. We'll be using this technique a lot while working with Bootstrap, so really try to understand the process. I have no doubt you'll become a master of this incredibly useful technique by the time this course is done. Let's practice some more, and get our other nav links to do the same. If we scour through Inspector, we can see the selector navbar-nav, li, a is being used to style them. So again, let's copy that selector over to our CSS. And this time, we can just append it to the other selector by separating them with a comma. Now, let's add some hover effects in there for these links. We can use the same selectors and just append :hover to them, but if we refresh and hover over them, we can still see there's a background being applied to these links. Again, Bootstrap is doing this as a default styling, so let's just overwrite that by adding background: none to these hover selectors. Refresh, and viola. Let's change our links in our markup to say, home, blog, and contact, and these, as these will be the three pages we're creating. And back in our stylesheet, let's give them a bit of special attention by separating them with a forward slash and some extra spacing. To do this, we simply say, navbar-nav>li>a:after, content, /, margin-left, 30. That looks good, but we don't want that last slash on there. So lets say, navbar-nav > li:last-child > a:after, content, nothing. Refresh, and now we've gotten rid of it. Now, as good practice, we want to constantly be checking what our site looks like when we view, when it's viewed on various devices. So if we shrink our viewport horizontally, we can see Bootstrap has already created this cool hamburger menu for us, but the colors are a bit off. So again, let's go in and inspect, and see what's causing this. It seems it's the navbar toggle element, so let's set CSS to say its background is a bit darker than our current background. So we'll set it to the, to, so we'll set its background to 111. And if we continue inspecting, we can see the navbar-toggle icon-bars each needs some special background treatment as well. So let's set that selector to have a background of our off-white color of F5F5F5. This is looking good, but our menu doesn't seem to expand whenever we click on it. To fix that, we need to import Bootstrap's script by going into bower_components, bootstrap.dist.js, bootstrap.min.js, and just copy that path over to our index.html file. We'll paste it right above plugins.js. These look good, but we still have those slashes from our desktop site, so let's get rid of those. If we look around in Inspector, we can see that Bootstrap is applying this hamburger menu when the viewport is at 768 pixels wide. So let's create a media query at that breakpoint, and simply remove our slashes there. So we'll say, @media, max-width, 768 pixels, navbar-nav>li>a:after, and then say, content, nothing. And since we already have that media query handy, let's add a bit of style to our responsive links by giving them a border-radius of four pixels, a background of that slightly darker off-black, and a margin-bottom of a few pixels. Refresh, and voila, our general reset and navbar look fantastic. In this lesson, we broke some ground on our portfolio build by implementing Bootstrap's really handy responsive navbar. Cleaning it up to match our design. Doing a general reset to our page. Adding some fonts to replace the defaults. And most importantly, we learned how to sift through preexisting Bootstrap styles and override them. In our next lesson, we'll learn about another Bootstrap component called Jumbotrons, to create some stunningly large, attention-attracting headers for our pages.

Back to the top