Header, Logo, and Menu Behavior

The header is the most immediately visible element on every page of your site. Blaskan gives you control over the site identity (title and logo) and the navigation menu through the WordPress Customizer and the menu management screen. This page explains each option and how they interact.

Site Title and Tagline

The site title and tagline are set in Settings > General in the WordPress admin. They are also accessible in Appearance > Customize > Site Identity.

By default, Blaskan displays the site title as text in the header. The site title links to the homepage. The tagline, if one is set, may appear below the title depending on theme settings.

If you upload a logo (covered below), the logo replaces the text title in most contexts. The site title text is still used as the alt attribute on the logo image and as the document title in the browser tab.

Uploading a Site Logo

Go to Appearance > Customize > Site Identity and click Select logo. WordPress handles image upload and cropping. After uploading, the logo image appears in the header in place of the text site title.

Recommended logo specifications:

• Horizontal or square aspect ratio
• SVG for logos with flat color and sharp geometry
• PNG with transparency for raster logos
• Minimum 200px wide; 400px or 2x equivalent for high-density displays
• Dark or high-contrast against the header background

If you set a logo and later want to remove it and return to the text title, return to Site Identity and click Remove on the logo.

Site Icon (Favicon)

The site icon is separate from the logo. It is the small icon that appears in browser tabs, bookmark lists, and mobile home screen shortcuts. Set it in Appearance > Customize > Site Identity > Site Icon. WordPress recommends a 512px square image; it generates smaller sizes automatically.

Navigation Menu Assignment

Blaskan registers a primary navigation menu location. To assign a menu to it:

1. Go to Appearance > Menus and create a menu if you have not already
2. Add pages, posts, categories, or custom links to the menu
3. Under Menu Settings > Display location, check Primary Menu
4. Save the menu

The menu you assigned then appears in the header navigation. If no menu is assigned to the primary location, Blaskan may fall back to displaying top-level pages or show nothing in the navigation area.

Menu Item Count and Header Density

The primary navigation renders inline in the header at desktop widths. The available space is fixed. A menu with three to six items renders cleanly. A menu with eight or more items may begin to crowd depending on the length of the item labels.

Short menu labels (one or two words) are preferable to long ones. If a navigation label needs more than three words to be meaningful, the information architecture may benefit from review. Navigation items should be broad enough to be obvious without being vague.

Mobile Navigation Behavior

At screen widths below 960px, the full inline navigation collapses. A menu toggle button (typically a hamburger icon) appears in the header. Tapping or clicking it opens the navigation in a dropdown or overlay.

The toggle button has an accessible aria-expanded attribute that updates when the menu opens and closes. Screen readers announce the state change. The button label reads "Menu" or equivalent.

Keyboard navigation of the mobile menu: The menu toggle is keyboard focusable. Pressing Enter or Space activates it. Once open, Tab navigates through the menu items. Pressing Escape while the menu is open closes it and returns focus to the toggle button.

Sticky Header

The Blaskan header is sticky by default at desktop widths. As you scroll down the page, the header remains visible at the top of the viewport. This keeps the navigation accessible without requiring the reader to scroll back to the top.

On mobile, stickiness may be suppressed to preserve viewport space for content. The exact behavior at narrow widths is controlled by the CSS media queries in the theme.

If you find the sticky header problematic for a specific page type (a fullscreen video page, for example), a child theme CSS override can disable it for that context. See child theme basics for how to apply targeted CSS overrides. For full navigation structure guidance, see menus and interaction.