7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Set Up the Header With a Menu and Hero Area

Our app is going to have a menu for navigation and a hero area to strengthen our site's branding. In this lesson, I'll show you how to add them to your site.

3.2 Set Up the Header With a Menu and Hero Area

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI framework in JavaScript Projects course with Tuts+. In this video, we will set up the menu and hero area of our project. Before we start adding semantic elements, we first need to add a custom CSS file to the root of our project. The first thing we add to this file is an import for another Google font. Now we are already importing a font for our entire project, but we're importing this font to serve as our brand. Then we add the my-brand class that uses the font we just imported as well as changes the text color. Then after that, we will add some styles for the hero class. First, we will set the background to an image. Create a folder named img in the root of your project then copy an image there. We set the width and height of this image to a 100% with the background size at the cover. This will make the image scale to the full size of the viewport. After that, let's go back to the index.html file. The first thing we will add is a grid to wrap the entire page. We are going to use nested grids to style the individual sections of our project. Then inside of this grid we add a row and then inside of that we add a nested grid. Now, the reason I did this is that I'm going for a design with the full-width hero image. The menu bar will be transparent and fixed to the top of the page. By applying the hero class to the grid, we will have the image as the background for any content that we add. Then we add a row with a 16 wide column. As I mentioned, the standard column width of semantic is 16 columns, so this will be a full-width row. Then inside of the 16 wide column, we add our menu. We use fixed to attach the menu to the top of the page. Large is a class that we use to set the menu bar to the large size. Inverted will set the background color to black by default, but we have already overwritten this and set it to transparent. Borderless will just create a menu with no borders between the menu items. Then we add a header item to the menu. This is how we add the brand to our menu bar. We have also supplied the heading with the my-brand class that will apply yellow tail font and change the color. Then we add the rest of the menu items, but first we are wrapping them in a div with the class of right menu. This will split these items off to the right of the menu bar. Then we add our menu items as links. After that, the last thing we need to do in this file is add the text that will appear in our hero area. How this works is this text area is going to be inside of our row, but outside of the menu. As you can see here, these are the opening and closing divs of our menu. Your editor should let you know where your opening and closing tags are. Here we will set a four wide centered column. This will set the column to be centered in the view port. Then finally we add center aligned segment that has the my-blurb class attached as well. This makes sure that our content is centered. After that, we add two huge headers. The headers are inverted and have the my-header and brand-color classes. Now, normally the first heading would cause a page break when the second heading is added. But since we set them to inline, they won't pair together. Then the large header will appear on another line since it is a different header element than the first two. Then finally we have a button that will navigate to the contact section. After that, we are finished with our hero area. Save your work and navigate to your project folder and double-click on your index.html file to launch it. Once the project launches, you should see the background image. The menu should also be fixed to the top of the screen. Now after that, we are done for now. In the next video, we will set up the services and portfolio section of our project.

Back to the top