Skip to content

Commit

Permalink
redesigned nav-menu overlay links
Browse files Browse the repository at this point in the history
  • Loading branch information
@nitinsooni
nitinsooni committed Oct 22, 2024
1 parent 1476fdc commit ae9175d
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 26 deletions.
20 changes: 11 additions & 9 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,20 +31,22 @@
<li class="nav-link"><a href="/index.html#contact">Contact</a></li>
<li class="nav-link"><a href="/blog.html" class="active">Blog</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<svg class="hamburger" viewBox="0 0 100 100" width="45" onclick="mobileMenu()">
<path class="line" d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"/>
<path class="line" d="m 70,50 h -40"/>
<path class="line" d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20"/>
</svg>
</div>
<div class="nav-r">
<a class="button" href="mailto:[email protected]">E-mail me</a>
</div>
<div class="nav-overlay">
<a href="/index.html#home" class="nav-link">Home</a>
<a href="/index.html#portfolio" class="nav-link">Portfolio</a>
<a href="/index.html#contact" class="nav-link">Contact</a>
<a href="/blog.html" class="nav-link">Blog</a>
<div class="container">
<a href="#home" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-house"></i></span>Home</a>
<a href="#portfolio" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-user-tie"></i></span>Portfolio</a>
<a href="#contact" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-address-card"></i></span>Contact</a>
<a href="/blog.html" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-align-left"></i></span>Blog</a>
</div>
</div>
</nav>
<button onclick="topFunction()" class="scroll-to-top"><i class="fa-solid fa-angle-up"></i></button>
Expand Down
20 changes: 11 additions & 9 deletions blog/blog-template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,20 +31,22 @@
<li class="nav-link"><a href="/index.html#contact">Contact</a></li>
<li class="nav-link"><a href="/blog.html">Blog</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<svg class="hamburger" viewBox="0 0 100 100" width="45" onclick="mobileMenu()">
<path class="line" d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"/>
<path class="line" d="m 70,50 h -40"/>
<path class="line" d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20"/>
</svg>
</div>
<div class="nav-r">
<a class="button" href="mailto:[email protected]">E-mail me</a>
</div>
<div class="nav-overlay">
<a href="/index.html#home" class="nav-link">Home</a>
<a href="/index.html#portfolio" class="nav-link">Portfolio</a>
<a href="/index.html#contact" class="nav-link">Contact</a>
<a href="/blog.html" class="nav-link">Blog</a>
<div class="container">
<a href="#home" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-house"></i></span>Home</a>
<a href="#portfolio" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-user-tie"></i></span>Portfolio</a>
<a href="#contact" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-address-card"></i></span>Contact</a>
<a href="/blog.html" class="nav-link"><span class="gold-gradient-text"><i class="fa-solid fa-align-left"></i></span>Blog</a>
</div>
</div>
</nav>
<button onclick="topFunction()" class="scroll-to-top"><i class="fa-solid fa-angle-up"></i></button>
Expand Down
16 changes: 14 additions & 2 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,11 +337,23 @@ nav .nav-overlay.active {
pointer-events: all;
}

nav .nav-overlay .nav-link {
nav .nav-overlay .container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}

nav .nav-overlay .container .nav-link {
color: var(--text-primary);
font-size: 1.2rem;
text-decoration: none;
margin: 1rem 0;
margin: 1.2rem 0;
}

nav .nav-overlay .container .nav-link i {
font-size: 1.3rem;
padding-right: .75rem;
}

.scroll-to-top {
Expand Down
Loading

0 comments on commit ae9175d

Please sign in to comment.