webcraftery.com
1<header class="header" id="header">
2 <nav class="nav container">
3 <a href="#" class="nav__logo">Logo</a>
4 <div class="hamburger">
5 <i class='bx bx-menu header__toggle' id="header-toggle"></i>
6 </div>
7 <div class="nav__menu" id="nav-menu">
8 <ul class="nav__list">
9 <li class="nav__item">
10 <a href="#home" class="nav__link active-link">
11 <span class="nav__name">Home</span>
12 </a>
13 </li>
14 <li class="nav__item">
15 <a href="#about" class="nav__link">
16 <span class="nav__name">About</span>
17 </a>
18 </li>
19 <li class="nav__item">
20 <a href="#skills" class="nav__link">
21 <span class="nav__name">Skills</span>
22 </a>
23 </li>
24 <li class="nav__item">
25 <a href="#portfolio" class="nav__link">
26 <span class="nav__name">Portfolio</span>
27 </a>
28 </li>
29 <li class="nav__item">
30 <a href="#contactme" class="nav__link">
31 <span class="nav__name">Contactme</span>
32 </a>
33 </li>
34 </ul>
35 </div>
36 </nav>
37</header>
38
39<main>
40 <!-- HOME -->
41 <section class="container section section__height" id="home">
42 <h2 class="section__title">Home</h2>
43 </section>
44
45 <!-- ABOUT -->
46 <section class="container section section__height" id="about">
47 <h2 class="section__title">About</h2>
48 </section>
49
50 <!-- SKILLS -->
51 <section class="container section section__height" id="skills">
52 <h2 class="section__title">Skills</h2>
53 </section>
54
55 <!-- PORTFOLIO -->
56 <section class="container section section__height" id="portfolio">
57 <h2 class="section__title">Portfolio</h2>
58 </section>
59
60 <!-- CONTACTME -->
61 <section class="container section section__height" id="contactme">
62 <h2 class="section__title">Contactme</h2>
63 </section>
64</main>Docs & Downloads
You can copy code manually, download icons/images separately, or download the entire project:
Was it helpful?
Download the Project with Github
Clone the Classic Navigation Menu with one Git command:
Terminal
-git
Contributions are welcome!
Feel free to open issues or submit pull requests to improve this project.
View on Github
Important
Add this to the head of html:
In this element were used icons from boxicons so please don’t forget to add this link to your html head.
MIT License
Quick Guide: Start Using Your Downloaded Project
1. Download the Project
Click the 'Download' button to save the zipped project file to your computer.
2. Unzip the Folder
Navigate to your downloaded file and right-click on the zip file. Select "Extract All..." to unzip the contents.
3. Start Using the Project
Open the extracted folder and access the project files. For specific setup instructions, refer to the provided documentation.
Troubleshooting Common Issues
If your download does not complete or the file is corrupt, try downloading again or contact support.
Contact Support