I'm looking to design a navigation bar for my website that features various links and the company logo. I want the links to have custom spacing, with some aligned on the left and others on the right edge. Additionally, I would like to incorporate a hover effect where the font size increases when a link is hovered over, without affecting the surrounding links or content. However, I'm encountering an issue where neighboring links shift when the font size changes. How can I adjust my code to prevent this?
I attempted using the `hover` subclass of the `a` tag, which sort of worked but caused neighboring links to shift. Each link has unique left and right margins, yet they still move when another link is hovered over. Should I continue using margin properties in such cases, or switch to floating elements? If floating is recommended, how can I align them at specific distances within the navigation bar?
Here's an excerpt from my CSS code:
/* Your CSS code here */
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<head>
<title>Navigation Bar Example</title>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<header>
<div>
<nav class="navigation-bar">
<div class="logo">
<img src="rocket-g9cbacc798_1280.png" alt="Company Logo" >
</div>
<ul class="navigation-links">
<li><a href="#">Home</a></li>
...
</ul>
</nav>
</div>
</header>
<!-- Rest of the content -->
</body>
</html>
Check out the full code here.