<div class="site-name">
YOUR COMPANY NAME
</div>

<nav class="nav-menu">
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#services">Services</a>
<a href="#portfolio">Portfolio</a>
<a href="#gallery">Photo Gallery</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
</nav>

</div>

<style>

.dad-site-nav {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 9999;
padding: 25px 20px;
box-sizing: border-box;
}

/* Company name */

.site-name {
font-size: 24px;
font-weight: 700;
color: #ffffff;
cursor: pointer;
letter-spacing: 0.5px;
padding: 10px 20px;
}

/* Navigation */

.nav-menu {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;

margin-top: 8px;
padding: 14px 25px;

background: rgba(20, 20, 20, 0.92);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50px;

opacity: 0;
visibility: hidden;
transform: translateY(-12px) scale(0.96);

transition:
opacity 0.3s ease,
transform 0.3s ease,
visibility 0.3s ease;

backdrop-filter: blur(15px);
}

/* Show menu when hovering */

.dad-site-nav:hover .nav-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}

/* Menu links */

.nav-menu a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 500;

transition:
color 0.2s ease,
transform 0.2s ease;
}

.nav-menu a:hover {
color: #4da3ff;
transform: translateY(-2px);
}

/* Mobile */

@media (max-width: 768px) {

.nav-menu {
flex-wrap: wrap;
gap: 12px 18px;
border-radius: 20px;
max-width: 90%;
}

.nav-menu a {
font-size: 13px;
}

}

</style>