A simple CSS guide to classy Apple-like navigation barHow to use CSS to design a simple, elegant and responsive navigation bar.
Jeton ThaçiBlockedUnblockFollowFollowingApr 8Not a lot of people can argue about the exclusive elegance of Apple’s products.
Their website is a typical example, particularly the sleek navigation bar.
While trying not to over-complicate the process, I’ll share the steps I took to make a visibly similar navigation.
Here is the HTML code for adding the navigation:As you may have noticed, I included the logo as an inline SVG image.
I did the same with the search icon.
This makes it easy to change their attributes using CSS only.
Also, instead of using a link or button for the navigation icon, I used div with two nested empty divs Those two empty divs will be the horizontal bars of the icon.
We’ll transform this into an X sign for closing the navigation bar in mobile view.
With the following lines of JavaScript, we can add or remove the show class from the navigation bar on click.
Now comes the most important part of the code — the CSS.
I will show and explain only the relevant part of it for simplicity.
If you want the complete code you can get it from this GitHub repository.
nav-content { max-width: 1024px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between;}.
nav-content a { display: block; font-size: 14px; line-height: 44px; text-decoration: none; transition: all 0.
3s; color: #ffffff;}.
nav-content a:hover,.
nav-icon:hover,.
search-icon:hover { opacity: 0.
7;}.
nav-links { width: 80%; display: flex; flex-direction: row; justify-content: space-between;}We are using the display: flex CSS property for the content inside the navigation as well as justify-content: space-between.
The justify-content property centers the links with equal space in-between them.
The page links are inside another flex element with the same justify-content: space-between property.
We want that grouping in order to hide those links in a smaller screen.
One more benefit of using the display: flex property is that we can change the order of items inside it, thus making the logo centered on the mobile screen.
Next, we have the navigation icon.
nav-icon { display: none; grid-gap: 5px; grid-template-columns: auto; padding: 17px 0; height: 10px; cursor: pointer; transition: all 0.
3s;}.
bar { height: 1px; width: 18px; background: white; transition: 0.
5s;}.
show .
one { transform: rotate(45deg) translateY(5.
5px);}.
show .
two { transform: rotate(-45deg) translateY(-5.
5px);}The navigation icon is hidden on bigger screens, that’s why it is going to have display: none initially.
But after the first media breakpoint, we will change it to display: grid.
That is why we need to specify the grid-gap and grid-template-columns properties and make sure the bars inside it are well positioned.
One more important thing is the transformation of the bars when the show class is added.
We rotate them 45 and -45 degrees accordingly and we adapt the position.
The translateY values may differ depending on the height, width, and position of the bars and the parent div.
And the last part is the media query.
@media (max-width: 768px) { .
nav-links { position: fixed; top: 44px; right: 0; height: 0; width: 100%; background: #333333; flex-direction: column; justify-content: flex-start; transition: all 2s cubic-bezier(0.
19, 1, 0.
22, 1); } .
show .
nav-links { height: 100%; } .
nav-links a { height: 0; width: 0; opacity: 0; overflow: hidden; margin-right: 50px; margin-left: 50px; transition: opacity 1.
5s, height 2s; } .
show .
nav-links a { opacity: 1; width: auto; height: auto; } .
nav-icon { order: 1; display: grid; } .
logo { order: 2; } .
search-icon { order: 3; }}We change the position of the links to fixed and we set the top to the height of the navigation bar.
We also need to change flex-direction to the column so the links are shown as a vertical list.
We add justify-content: flex-start to stick the list to the top instead of being vertically centered.
We are not using display: none because it will break the transition effects.
Instead, we remove the height, width and opacity.
Then we change the order of the elements in the navigation bar by placing the logo in the middle and making space for the navigation icon on the left.
You can check the live version here to see how it looks.
.