Mini TP Video Tutorial: Topbar

Welcome to this new video where today I suggest you practice CSS a little bit through a concrete example: a responsive topbar. To follow this video you can copy the project available on figma.

The difficulties

As you can imagine, I slipped a few little subtleties in this design to make you think and practice and here are some constraints to respect to spice it up:

• We will try to limit as much as possible the number of HTML elements that are necessary for the reproduction of this design.

• We will try to use a structure that makes sense from a semantic point of view (we will use for example lists to represent navigation).

• Finally, we will only use CSS, no image (except for icons) or JavaScript at the moment.

HTML structure

At the HTML structure level we will separate our two navigation elements in two separate lists. This choice makes sense from a semantic point of view but will also simplify our lives during integration because it will allow us to better separate the two elements.

The container

The first thing we notice about this design is that the menu is not enlarged over the entire width of the screen but is placed in a centered container of 1000px. To integrate this container we will simply use the property max-width and automatic margins on the sides.

.topbar__container {
  max-width: 1016px;
  margin-left: auto;
  margin-right: auto;
}

The bottom

The background is a bit special, especially on large resolutions. Indeed, the background color changes between the right and left part of the bar. To solve this problem my solution is to use a linear gradient with a clear separation in the middle.

@media only screen and (min-width: 600px) {
  .topbar {
    font-size: 14px;
    background: linear-gradient (
        to right,
        var (- topbar-color)
        var (- topbar-color) 50%,
        var (- topbar-background) 50.01%,
        var (- topbar-background)
    )
  }
}

To hide this separation then we will use a background color at the container level.

.topbar__container {
  background: var (- topbar-background);
}

And finally, in order to have the first two elements with a green background color.

.topbar__info {
  background: var (- topbar-color);
}
.topbar__infos li: last-child {
  background: var (- topbar-background);
}

The oblique

Finally the last blocking point is the presence of an oblique element after our second link. To create this element, we will use a CSS trick to create triangles based on a border. To place this element we will use a pseudo-element which will be located after the second LI.

.topbar__infos li: last-child :: before {
  happy:'';
  margin-right: 15px;
  display: inline-block;
  border-right: solid 30px transparent;
  border-bottom: solid 55px var (- topbar-color);
}

My solution! = THE solution

I would like to remind you that there is not just one way of doing things in CSS and what I am proposing here is a solution among a whole bunch of possible solutions.