1

In the navigation bar of our website, the "overview" tab shifted downwards if I write the following a tags in the next line. While writing the next following anchor tag in the same line as the closing tag magically fixes the issue.

This code gives such output

<nav role="navigation" class="nav-menu w-nav-menu">
  <div data-delay="0" class="w-dropdown">
    <div class="nav-link dropdown w-dropdown-toggle">
      <div>Overview</div>
      <div class="dropdown-arrow w-icon-dropdown-toggle"></div>
    </div>
    <nav class="dropdown-list w-dropdown-list">
      <a href="/usecases" class="dropdown-link w-dropdown-link">Use cases</a>
      <a href="/pricing" class="dropdown-link w-dropdown-link">Pricing</a>
    </nav>
  </div>
  <a href="https://tryscribe.haash.io/" target="_blank" class="nav-link w-nav-link">FAQs</a><a href="/about-scribe" class="nav-link w-nav-link">About</a><a style="text-decoration: none" href="/login" class="nav-link w-nav-link">Login</a>
</nav>

Navbar showing unexpected behaviour. See image.

while removing the next line after the closing </div>:

<nav class="dropdown-list w-dropdown-list">
  <a href="/usecases" class="dropdown-link w-dropdown-link">Use cases</a>
  <a href="/pricing" class="dropdown-link w-dropdown-link">Pricing</a>
</nav>
</div><a href="https://tryscribe.haash.io/" target="_blank" class="nav-link w-nav-link">FAQs</a><a href="/about-scribe" class="nav-link w-nav-link">About</a><a style="text-decoration: none" href="/login" class="nav-link w-nav-link">Login</a>

Navigation bar fixed

Had a hard time fixing this, but I'm still not sure why this is working.

Sonaksh Saraswat
  • 11
  • 3
  • 1
    https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – CBroe Jul 05 '18 at 14:49
  • Possible duplicate of [How do I remove the space between inline-block elements?](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements) – rafaelcastrocouto Jul 05 '18 at 16:43

0 Answers0