halfheart.net/site-header.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    :host {
        display: block;
        width: 100%;
    }

    :root {
      --primary-glow: #ff2a2a;
      --active-bg: #aa0404;
      --header-height: 60px;
    }
    
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .header-container {
        display: flex;
        align-items: center;
        gap: 15px; 
        margin: 0 auto;
        width: 92%;
        max-width: 1920px;
        position: relative;
    }
    
    .logo-capsule {
        background-color: #00000000;
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      
        height: var(--header-height);
        width: max-content; 
        min-width: 60px;    
        flex-shrink: 0;     
      
        transition: background-color 0.3s ease;
        z-index: 10;
    }
    
    .logo-capsule a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    
    .logo-capsule:hover {
        background-color: #00000000;
    }
    
    .logo-capsule img {
        display: block;
        height: 100%;       
        width: auto;        
        box-sizing: border-box;
        padding: 7px;      
    }
    
    .topnav {
        background-color: #000000;
        display: flex;
        align-items: stretch;
        position: relative;
        flex-grow: 1; 
        height: var(--header-height); 
        border-radius: 20px;
        overflow: hidden;
        border: 2px solid #ff2a2a66
    }
      
    .topnav a {
        display: flex;         
        align-items: center;   
        justify-content: center; 
        color: white;
        padding: 0 20px;       
        text-decoration: none;
        font-size: 17px;
        position: relative;
        transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
        border-radius: 20px; 
        flex-grow: 1;
    }
    
    .topnav a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background-color: var(--primary-glow);
        transition: width 0.3s ease, left 0.3s ease;
        transform: translateX(-50%);
        border-radius: 20px;
    }
    
    .topnav a:hover::after {
        width: calc(100% - 40px);
        left: 50%;
        transform: translateX(-50%);
    }
    
    .topnav a:hover {
        background-color: #ff2a2a6f;
        color: white;
    }
    
    .topnav a.active {
        background-color: var(--active-bg);
        color: white;
        box-shadow: inset 0 -4px 15px rgba(255, 42, 42, 0.4), 0 0 15px rgba(255, 42, 42, 0.3);
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    }
    
    .topnav .icon {
        display: none;
    }
    
    @media screen and (max-width: 768px) {
        .header-container {
            flex-direction: row;
            align-items: flex-start; 
            justify-content: space-between;
            height: var(--header-height); 
        }

        .topnav {
            position: absolute;
            right: 0;
            top: 0;
            flex-direction: column; 
            align-items: stretch; 
            flex-grow: 0;       
            width: 60px;        
            height: var(--header-height); 
            transition: width 0.3s ease-in-out, height 0.3s ease-in-out, background-color 0.3s ease; 
        }

        .topnav.responsive {
            width: 100%;        
            height: 315px;
            background-color: #000000; 
        }
  
        .topnav a:not(.icon) {
            display: none;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .topnav.responsive a:not(.icon) {
            display: flex;
            height: 60px; 
            width: 100%;
            box-sizing: border-box;
            justify-content: flex-start; 
            padding-left: 20px;
            opacity: 1;
            transition: opacity 0.3s ease 0.1s; 
        }

        .topnav.responsive a:not(.icon):nth-child(1) {
          margin-top: calc(var(--header-height) + 15px);
        }
  
        .topnav.responsive a:not(.icon)::after {
          display: none;
        }

        .topnav a.icon {
          display: flex;
          position: absolute;
          right: 0;
          top: 0;
          left: 0;   
          height: var(--header-height);
          justify-content: center; 
          align-items: center; 
          width: auto;
          color: #f2f2f2;
          padding: 0; 
          z-index: 15;
        }

        .topnav.responsive a.icon {
            left: auto; 
            width: 60px;
        }
    }
</style>
<br>
<div class="header-container" id="headerContainer">
    
    <div class="logo-capsule">
        <a href="index.html" id="logo">
            <img src="logo.png" alt="Half Heart Logo">
        </a>
    </div>

    <div class="topnav" id="myTopnav">
        <a href="index.html" id="home" class="inactive">Home</a>
        <a href="about-me.html" id="about-me" class="inactive">About Me</a>
        <a href="projects.html" id="projects" class="inactive">Projects</a>
        <a href="mc-servers.html" id="minecraft-servers" class="inactive">Minecraft Server</a>
        <a href="javascript:void(0);" class="icon" onclick="toggleMobileMenu()">
            <i class="fa fa-bars"></i>
        </a>
    </div>

</div>
<br>