A tag click transition

I have a nav-bar that is position: fixed; to the top and has a java script effect that ass a background.
I have a tag in my nav-bar of course and are set to go to the respective div. The problem is that when I click on them
they goo a bit too fat because of the navbat , and now the nav bar is a over the text in some cases, Is there a way I could fix it ?

here is the navbar html

[code]<nav>
<div class=”logo”>
<a href=”#”>
<img src=”img/logo.png” alt=”logo nav bar”>
</a>
</div>
<ul class=”nav-links”>
<li><a href=”#”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#portfolio”>Portfolio</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
<div class=”burger”>
<div class=”line1″></div>
<div class=”line2″></div>
<div class=”line3″></div>
</div>
</nav>[/code]

Also in #HTML _↴