test
September 16, 2026
The rectangle and small sizing both come from your existing CSS rules (`.brand-mark` likely has a fixed `width`/`height` box, and the header font sizes are set small). Inline styles can't fully beat those without `!important`, and your nav/menu sizes are controlled separately in `style.css`.
**Fastest fix that respects "don't touch anything else"** — add a small `<style>` block right after the stylesheet link, scoped only to the header. This overrides the circle/rectangle and bumps the menu sizes without editing your CSS file:
```php
<?php
require_once __DIR__ . '/../config.php';
$pageTitle = $pageTitle ?? SITE_NAME;
$metaDescription = $metaDescription ?? 'Find Christian, Hindu and Muslim song lyrics in Hindi, English and Indian languages.';
$canonical = $canonical ?? SITE_URL . ($_SERVER['REQUEST_URI'] ?? '/');
$currentPath = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH) ?: '/';
$currentPage = basename($currentPath);
function nav_active(string $page): string {
global $currentPage;
return $currentPage === $page ? 'active' : '';
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= e($pageTitle) ?></title>
<meta name="description" content="<?= e($metaDescription) ?>">
<link rel="canonical" href="<?= e($canonical) ?>">
<meta property="og:title" content="<?= e($pageTitle) ?>">
<meta property="og:description" content="<?= e($metaDescription) ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?= e($canonical) ?>">
<link rel="stylesheet" href="/assets/css/style.css">
<style>
/* Logo — kill the circle/rectangle box */
.site-header .brand .brand-mark{
border-radius:0 !important;
background:none !important;
width:auto !important;
height:60px !important;
max-width:none !important;
object-fit:contain !important;
display:block !important;
}
/* Brand text sizes */
.site-header .brand strong{ font-size:22px !important; }
.site-header .brand small{ font-size:13px !important; }
/* Navigation menu — bigger */
.site-header nav a{
font-size:17px !important;
padding:10px 14px !important;
}
/* Header action buttons */
.site-header .header-actions .icon-btn,
.site-header .header-actions .search-btn{
font-size:16px !important;
padding:10px 16px !important;
}
/* Top bar */
.topbar{ font-size:14px !important; }
</style>
</head>
<body>
<div class="topbar">
<div>✝ Glory to Jesus Christ</div>
<div class="toplinks">
<a href="/about.php">About Us</a>
<a href="/contact.php">Contact Us</a>
<a href="/privacy.php">Privacy Policy</a>
<a href="/dmca.php">DMCA</a>
<span>f</span><span>◎</span><span>▶</span>
</div>
</div>
<header class="site-header">
<a class="brand" href="/">
<img src="/assets/logo.webp" alt="Holy Worship" class="brand-mark">
</a>
<nav>
<a class="<?= nav_active('index.php') ?>" href="/">Home</a>
<a class="<?= nav_active('songs.php') ?>" href="/songs.php">Songs</a>
<a class="<?= nav_active('artists.php') ?>" href="/artists.php">Artists</a>
<a class="<?= nav_active('languages.php') ?>" href="/languages.php">Languages</a>
<a class="<?= nav_active('albums.php') ?>" href="/albums.php">Albums</a>
<a class="<?= nav_active('blog.php') ?>" href="/blog.php">Blog</a>
<a class="<?= nav_active('bible-verses.php') ?>" href="/bible-verses.php">Bible Verses</a>
</nav>
<div class="header-actions">
<button class="icon-btn" type="button" aria-label="Toggle theme">◔</button>
<a class="search-btn" href="/search.php">⌕ Search</a>
</div>
</header>
```
### What this does:
- **`.brand-mark`** — forces `border-radius:0`, removes background, sets height to `60px` (make it bigger/smaller as you like), and `width:auto` so it doesn't stretch into a rectangle.
- **Brand text** — bumps `strong` to 22px and `small` to 13px.
- **Nav links** — 17px font with more padding so the menu isn't cramped.
- **Action buttons & topbar** — slightly larger so they match.
### If it *still* looks like a rectangle:
That means `.brand` itself (the parent `<a>`) has a fixed width/height. Paste your `.brand` and `.brand-mark` CSS rules from `style.css` and I'll give you the exact override. Also: is the actual `logo.webp` file itself rectangular? If the image has a rectangular background baked in, no CSS can make it round — you'd need a transparent/PNG-style logo.