`, and/or any other elements.
` and the ` ` be side by side with the ``.
` and give it class of "titles".
We are grouping them for styling purposes later on.
```html
Sophisticated Navbar
Navbar Demo With Flexbox & Media Queries
```
## Start Styling With CSS
I'm using *Caveat* and *VT323* fonts from [Google Fonts](https://fonts.google.com/). Feel free to use any type of fonts of your choice.
## Styling The ``
What we are doing here:
- Give it a background color.
- Overwrite the default margin from browsers by setting the `margin` to `0`.
- Use the same font type for `.subtitle` and `
`.
` to overwrite the default font.
- Give `margin: 0;` to `` to get rid of the default margin that comes with it.
- Set `color` and `font-size` for the ``, `.subtitle` and `nav a`.
- Apply `text-transform: uppercase;` to the `.subtitle` and `nav a `.
```css
h1 {
font-family: "Caveat", cursive;
font-size: 2.5rem;
color: #fd5f00;
margin: 0;
}
.subtitle,
nav a {
font-size: 1.5rem;
color: #f9f8eb;
text-transform: uppercase;
}
```
## Styling The Layout
### The `.container`
What we are going to do here:
- Set `width: 90%;` to give some space on the left and right sides.
- Set `max-width: 900px;`.
` and we will do this with Flexbox in `.container-nav`.
` to the top and in line with the `.titles`.
- Set `justify-content: space-between;` to give space between the `.titles` and the ``.
` and the `.subtitle` in a ``. Now we can apply the `space-between` to give space and split our `.titles` and `
` as groups*.
- Set `align-items: center` to center both `.titles` and `` vertically.
```css
.container-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
```
### The ``
What we are going to do here:
- Give it a background color.
- Give padding to the top and bottom, to give some space.
- Apply `box-shadow`, just for some aesthetic purpose.
```css
header {
background-color: #05004e;
padding: 0.8em 0;
box-shadow: 2px 2px 10px #f1f6f9;
}
```
### Styling The Navbar
### The `nav ul`
Now we will style all `` inside our ``.
`s.
```css
nav li {
margin-left: 2em;
}
```
Now, if we shrink the size, we can see that all ` ` have space and the first ` ` is not touching the `.titles`.
### The `nav a`
What we are going to do here:
- Set `text-decoration` to `none`, to get rid of the link's underline.
We will also:
- Change the color for the link when we hover over them, and when they are on the focus state.
```css
nav a {
text-decoration: none;
}
nav a:hover,
nav a:focus {
color: #fd5f00;
}
```
This all looks good so far.
` as a column.
- Apply `flex-direction: column;` to the `nav ul`.
Pay attention to the ``s. They are all go a little bit to the right side.