CSS for Navigation Menu Hover Effects

Code preview

Document

For Source Code Please Scroll Down!

How to Create a Centered Navigation Menu Using Flexbox

A Simple, Stylish Approach to Menu Design

In web development, creating a clean and functional navigation menu is essential for improving user experience. A centered menu is often the first choice for designers looking to give their website a modern, minimalist aesthetic. Using Flexbox, a powerful layout tool in CSS, you can center a navigation menu both vertically and horizontally with ease.

This particular code achieves that by applying Flexbox properties to the body of the page. The display: flex; property is applied to the body element, allowing you to center content easily. The justify-content: center; rule aligns the menu horizontally, while align-items: center; ensures it’s vertically aligned. Combined with the fixed width of the .menu (set to 250px), the menu stays in place, even when the viewport changes.

By adding some simple padding and styling to each link, the navigation becomes visually appealing and easy to interact with. Hover effects and smooth transitions add an engaging element to the design, allowing users to easily navigate through different sections of the website. Whether you’re building a personal blog or a corporate site, this technique ensures that your navigation menu is both functional and aesthetically pleasing.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="menu">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>
</body>
</html>

CSS:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html,
body {
    display: grid;
    height: 100%;
    place-items: center;
    background: #212121;
}

.menu a {
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px 50px;
    color: #fff;
    background: #333;
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    margin: 10px 0px;
    letter-spacing: 1px;
    text-align: center;
    transition: 0.3s ease;
}

.menu a:hover {
    background: #ff6ecf;
    transform: scale(1.1);
}