Header Options

The Header Area is at the top of your site, and really gives the world the first impression of your site. Thus, there are many options for tweaking the site Header.

Weaver supports up to two menu bars. With no additional action, your menu will be built automatically using the pages you’ve defined (using the Page Attributes parent and order settings). Display of your posts (blog) in the menu is determined by how you’ve set the main Settings->Reading Front page displays options. To use a second menu, you’ll need to use Appearance->Menus, and define the Secondary Navigation menu. If you define the Primary Navigation menu, it will be used instead of the automatic menu generation from the Page Attributes settings. Note that by using the Page with Posts template to create a blog page, combined with the Reading Front page displays setting, and the No Home Menu Item, you have complete control over menu content and blog display.

You also have several options for controlling basic display of the Site Title and Tagline. If these settings don’t give exactly what you want, the very best way to get exactly what you want is to use a photo or image editor to add exactly the site logo or title you want – you can simply hide the default display of the site title and tagline in that case.

Weaver Xtreme supports the variable sized header images. You can also check “Hide Header Image” to hide it. The header image will always be displayed using the site’s full width, even if the “real” size is the default 1100px width by 188px high. You can control how good the header image looks by varying its size and the compression ratio. Even so, you still must be aware of the file size of your header image (indeed, ALL images on your site.) Typically, you will want your image to be less than 100K bytes.

You can also control how much space is displayed after the header and before the content.

For ultimate control of the Header, it is possible to completely replace it on a site wide or per page basis using the Header HTML area or using the equivalent per page options.

Header Widget Area

You can also add a widget area to the Header. Details are found in the Widget Areas and Widgets article.

With the Weaver Xtreme Plus plugin, you can control the position of the Header Widget Area within the Header.

Header HTML Area

You can add HTML to the Header HTML areas in the specialized Header and Footer HTML sections of the Header and Footer sections under the Content panel. This must be HTML markup code (including WP shortcodes), and will be inserted into the header (#header) and footer (#colophon) areas.

For the header, when used in combination with hiding the site title, header image, and the menu, you can design a completely custom header. You can use it for logos, better site name text – whatever.

If you hide the title, image, and header, no other code is generated in the #branding <header> block (HTML 5!), so the code here can be a complete header replacement. You will almost certainly need to add some CSS style, too.

You can also override the CSS #branding rule, create a new div, or use in-line styling. One of the most flexible capabilities of the section is the ability to embed WordPress shortcodes. This might be most useful for adding a rotating header image using a plugin such as Weaver Show Sliders.

For example, assume you’ve installed the Weaver Show Sliders plugin, and have uploaded your rotating header images for the plugin to use. To add this slide show header image, you should first disable the default header image by checking the “Hide Header Image” in the Main Options tab. Then, add this code to the Header HTML content box on the Header options tab:

<div class=”aligncenter”>ERROR with [show_slider name="header-images"]: You must specify a valid slider name.</div>

Note that the built-in aligncenter CSS class will ensure the slide show is displayed properly. Without appropriate CSS styling, you may get unexpected placement of the plugin output. The aligncenter class will usually do what you want.

Menu Bar and Info Bar

Weaver Xtreme allows you to control many aspects of the main menu bars, as well as the Info Bar. The Info Bar will normally be displayed right under the Primary Menu in the header. Depending on the menu content, it can be easy to confuse the two, and think that the Info Bar is a “doubled” menu.

Menu Bar

Weaver Xtreme allows you to control the menu bar colors, as well as the colors of the submenus and hover colors. You can specify bold or italic text.

Info Bar

The Info Bar is new to Weaver Xtreme. It provides two basic features – a “breadcrumb” menu that shows the path to the current page. On blog pages, there is an additional “Navigation Page” display that displays a numbered menu for quick access to a specific block of blog posts. (Note: if you are using Yoast WordPress SEO and enable its breadcrumb support, Weaver Xtreme will automatically use Yoast’s version instead of the built-in breadcrumbs.)

You can hide the info bar, as well as control if the info bar is displayed right after the menu bar (thus taking the full width of the page), or right above the content area (thus only going to the sidebar).