Navigation

CSSkel provides a responsive navigation bar (.navbar) with a hamburger menu for mobile devices, styled using CSS variables for easy customization.

Navbar Structure

The navbar uses a nav element with the .navbar class, containing a .nav-container for layout, a logo, and a menu. The menu is hidden on mobile and toggled using a checkbox and hamburger icon.

<nav class="navbar">
    <div class="nav-container">
        <a href="#" class="navbar-logo"><strong>Your</strong> Logo</a>
        <input class="menu-btn" type="checkbox" id="menu-btn">
        <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
        <div class="menu">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </div>
</nav>

Responsive Behavior

On screens larger than 900px, the menu is displayed inline, and the hamburger icon is hidden. On smaller screens, the menu is hidden by default and revealed by clicking the hamburger icon (controlled by the checkbox).

Navbar Styling Variables

Navbar styles are controlled by the following CSS variables:

Variable	Description	Default Value
--navbar-background	Background color of the navbar	var(--background-color)
--navbar-color	Text and icon color	#444
--navbar-hover-background	Background color on hover	#f4f4f4
--navbar-hover-color	Text color on hover	#000