Header (<header>)
The <header> component is the primary top navigation container for your website. It features a sticky top navigation bar with brand logo integration, navigation links alignment, utility buttons (cart, profile, search), and mobile-responsive toggle buttons.
<header>
<div class="container">
<div class="logo-box">
<a href="index.php">
<img src="images/webpez-icon.png" alt="Logo">
<h1>Web<span class="blue">Pez</span></h1>
</a>
</div>
<ul id="main-menu" class="right-menu">
<?php include 'menu.php'; ?>
</ul>
<btn onclick="togglePop('cart-pop')"><i class="bi bi-cart3"></i></btn>
<btn onclick="togglePop('user-pop')"><i class="bi bi-person-circle"></i></btn>
<btn onclick="togglePop('main-menu')" id="menu-toggle-button" class="hidden-large"><i class="bi bi-list"></i></btn>
</div>
</header>
Header Navigation List (header ul)
The header ul (typically with ID #main-menu) houses navigation menu links. In desktop viewports (min-width: 1081px), it renders as an inline-flex horizontal menu bar. On mobile and tablet devices, it automatically transforms into an animated slide-over menu triggered via togglePop('main-menu').
| Class / Selector | Description |
|---|---|
.right-menu |
Aligns menu items to the right side of the header navigation bar on desktop screens (margin-left: auto). |
.left-menu |
Aligns menu items directly adjacent to the logo on the left side of the header container. |
.hidden-large |
Hides elements on large/desktop screens (such as the mobile hamburger toggle button). |
togglePop('main-menu') |
JavaScript helper that opens or closes the mobile overlay menu. |
<!-- Navigation list inside header -->
<ul id="main-menu" class="right-menu">
<li class="close-button" onclick="togglePop('main-menu')"><i class="bi bi-x-lg"></i> Close</li>
<li><a href="index.php">Home</a></li>
<li><a href="web-development.php">Websites</a></li>
<li><a href="seo-marketing.php">SEO & Marketing</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<!-- Mobile menu toggle button -->
<btn onclick="togglePop('main-menu')" class="hidden-large">
<i class="bi bi-list"></i>
</btn>
Floating Linkbar (.linkbar)
The .linkbar is a floating, high-accessibility quick-action dock for instant customer contact channels (WhatsApp, Phone Call, Email, Instagram, Homepage). On desktop screens, it is pinned vertically along the right viewport edge with glassmorphism blur; on mobile, it adjusts ergonomically for thumb interaction.
<div class="linkbar">
<a href="./" target="_blank" title="Home"><img src="images/webpez-icon.png" alt="Home"></a>
<a href="https://www.instagram.com/webpez.online/" target="_blank" title="Instagram"><img src="images/icon/instagram.png" alt="Instagram"></a>
<a href="https://wa.me/919999803336" target="_blank" title="WhatsApp"><img src="images/icon/whatsapp.png" alt="WhatsApp"></a>
<a href="tel:+919999803336" target="_blank" title="Call Us"><i class="bi bi-telephone"></i></a>
<a href="mailto:info@webpez.com" target="_blank" title="Email Us"><i class="bi bi-envelope"></i></a>
</div>
Pop Alert (.pop-alert)
The .pop-alert is a floating, prominent notification card anchored at the bottom of the viewport. It is used for cookie consent notices, announcements, or persistent action prompts. It is activated by adding the .active class or triggered seamlessly with togglePop('pop-alert-id').
<!-- Pop Alert Markup -->
<div class="pop-alert active" id="cookies-info-pop">
<h4>We Use Cookies!</h4>
<p>
We use cookies to personalize your experience on our website!
Read our <a href="./privacy-policy.php">'Privacy Policy'</a> and
<a href="./terms-of-service.php">'Terms of Service'</a> to know more.
</p>
<button class="white-button" onclick="togglePop('cookies-info-pop')">Close</button>
<button class="blue-button" onclick="acceptCookies()">Accept</button>
</div>
Pop-Page Modal (.pop-page)
Full-screen backdrop overlay modal system for user account popups, cart panels, and complex dialogues.