Currently, I am delving into frontend development with the NextJs framework. As a newcomer to this field, I am facing a challenge in creating a navbar that displays an underline below each menu item. Despite my attempts at using various CSS properties, none of them seem to be effective.
Here is the code snippet related to my navbar:
Navbar.js
import Link from 'next/link';
const Navbar = () => {
return(
<nav className='navigation'>
<div className="logo">
<h1>My logo</h1>
</div>
<div className="menu">
<ul>
<li className="menu-items"><Link href="/">Home</Link></li>
<li className="menu-items"><Link href="/about">About</Link></li>
<li className="menu-items"><Link href="/contact">Contact</Link></li>
</ul>
</div>
</nav>
);
}
export default Navbar;
global.css
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.navigation {
display: flex;
justify-content: space-between;
}
.menu-items {
list-style-type: none;
display: inline;
margin-right: 20px;
background-color: coral;
color: white;
padding: 10px;
border-radius: 3px;
}
I am seeking guidance on how I can achieve the desired results for my navbar. Any suggestions or advice would be greatly appreciated!