We design last of all the content for the header and the navigation bar. The latter feature often requires the most effort.
We will begin with the search box that should be displayed at the bottom end of the
header. In this instance, we need to differentiate between the
<form> element with the ID search and the actual
input field within the form element. The form
element’s role in this is as a container for positioning the search box. Some CSS
definitions are already present for the search box.
input search box
Width: 100% (= total width of the 40%-wide form element).
The values for left and right are simultaneously set to 0. This means that the element would be spread out at first. However, the fixed width of 40% and margin:auto ensure that the element is centered. In addition, we assign it a small offset from the bottom of 0.7rem.
Next is the title of the page in the header.
Font: 10rem, centered, no line wrap
Line spacing: 2em
Text shadow: 3px, 3px, 5px, black with 40% opacity
We ignore the fact, for the moment, that the navigation bar is shifted by the title and is sticking out from the header.
Test the result again by making the browser window smaller. As we have, at 750px, reduced the height of the header, the title’s font size is now too big. Insert a new breakpoint for this max-width underneath the selector for the h1 heading in the #header, and reduce the font size.
The last feature to look at is the main navigation bar. On large screens it should appear as a horizontal bar at the top edge of the header.
The list in the nav element should be displayed as a table. Also remove the default indentation and list bullets. Width: 100%
List items (“table cells”):
Border: 1px solid #bbb, only left
Row height: 1.7em, no line wrap
Text alignment: centered
Color: Default text color, no underline.
When you hover with the mouse, the text color should change to #2070bb (variable) and a vertical gradient from rgba(0, 0, 0, 0.1) to rgba(0, 0, 0, 0) (variables) should also be displayed behind it.
It has become a widespread standard practice on mobile devices to minimize menus to a small icon (). When you tap on the icon, a dropdown menu appears. In our layout it should look as follows (the above image shows the normal state, while the bottom one shows it with the dropdown menu):
In our example the icon is formed from the nav element, the ul is the dropdown menu, and the li elements are the individual menu items. The links are highlighted during hovering with a blue gradient.
Remember that when using media queries, this not only involves designing new layouts, but also always modifying properties that are already present or restoring default values. Therefore, it makes very good sense in practice to check first which properties you have already assigned to an element so that you know which properties you will need to change in the media queries.
The breakpoint should be at a max-width of 800px. Use the following definitions to design the menu:
Text color: white (we will add the icon later)
Position from top: 0.5rem (the absolute positioning is already specified in the general definition)
Position from right: 0.5rem
Position from left: auto (important: this resets the prior position)
Round corners: 4px
Background: vertical gradient from #555 to #000 (variables)
The ul should be, within nav , absolutely positioned so that it appears at the bottom edge of the icon:
Position from right: 0
Position from top: 100% (= icon’s height)
Background color: Black with 80% opacity
Round corners: 5px (variable)
Padding: 0.3rem top and bottom, 1rem left and right
Links when hovering:
Text color: white
Background: vertical gradient from #59b4fd to #0560e8 (variables)
The “label” for the menu button () is also created in CSS:
Unicode character: \2261
Font size: 2rem
Text alignment: centered
Row height: 0.8em
Display: as block element
How can you prevent the navigation bar in small viewports from disappearing behind the search box?
We have now completed our layout. The content is now conveniently accessible from any device.
If you want, you can finish by “tweaking” the layout slightly more. For instance, you could adapt the width ratio between the content area and sidebar on large screens or reduce the font size of headings on small screens.
Upgrade to the guided course option to get: