Configuring the Header or Navigation Bar in Webium Pro Theme

The Header or also known as the Navigation Bar (Navbar) in the Webium Pro Theme consists of several elements such as the Blog Logo Image and Title, Search Bar, Search Button, Dark or Light Mode Toggle Button, More Menu Toggle Button, etc.

Blog Logo and Title

There are several options that can be adjusted to your liking. Here are some steps to set the Blog Logo and Blog Title:

1. Go to Blogger Dashboard and select the Layout menu.
2. Look for the section titled Header Logo and Title and click the edit button (pencil icon) on the Header (Page Header Gadget).
3. A Header Configuration Popup will appear.
4. In the Blog Title input, enter the name of your blog.
5. In the Blog Description input, enter your blog description (Secondary Title under the Main Blog Title).
6. In the Image section, there is two Radio Button Options. There are two options which you can use. Here is the explanation:
   • Input image URL - You need to paste the uploaded image URL into this input.
   • Upload an image from your computer - You need to upload a new image from your computer by clicking the Browse button and selecting the logo image you want to use.
7. If the Image section is already set, you can set the placement on in the Image Placement section. There are three options which you can use. Here is the explanation:
   • Behind title and description - To display the Blog Title only.
   • Instead of title and description - To display the Blog Image or Logo only (Without the Blog Title text).
   • Have description placed after the image - To display Blog Image or Logo, Blog Title and Blog Description (Secondary Title).
8. You can skip the Shrink to fit option. Even if you set it, it still does not have any effect on the image.
9. If so, click the SAVE button.

Information:

• If you set Image Placement to Instead of title and description (To display the Blog Image or Logo only), then Blog Title text will be hidden from interface (Not Removed) because blog title is very useful for Search Engines.
• If you're using a blog logo as an image, make sure it's no more than 36 pixels high and the width will adjust accordingly. We recommend using transparent images in .PNG, .WEBP, or .SVG formats.

Search Bar and Search Button

The Search Bar element consists of a Submit Button, Search Input and Close Search Button.

On the desktop screen, a search bar will appear. While on the mobile screen, the search bar will be hidden and a toggle button will appear which is useful for opening the search bar. In addition, the button to close the search bar will only appear on the mobile screen.

Color Mode Toggle Button

The Color Mode Toggle Button on the Header or Navbar will appear when you have enabled the Color Mode Feature.

More Menu

The More Menu Toggle Button in the Header will appear when you have enabled and set the menu items for the More Menu.

Customizer Settings

There are several Options and Color settings for all elements in the Header or Navbar.

Options for Header or Navbar

There are several Header or Navbar Options that can be customized, namely:

Navbar Description

This setting is useful for enabling or disabling Blog Description on Header or Navbar. Here are some steps to customize and some explanations:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced, click Default Options Dropdown and Select Navbar Options.
4. Look for the Option named Navbar Description (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - The Blog Description will be hidden even if you have entered the Blog Description input.
   • 2px: Enable - The Blog Description will be visible.
5. Click the Save button (diskette icon) in the lower right corner.

Information:

• Navbar Description is not part of the Blog Title, actually just the secondary Blog title which will only be visible to the user.
• You can also disable the Navbar Description by removing the Blog Description text in the Header Gadget.

Search Bar Alignment

This setting is useful for adjusting the alignment of the Search Bar. Here are some steps to customize and some explanations:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced, click Default Options Dropdown and Select Navbar Options.
4. Look for the Option named Search Bar Alignment (Left | Center | Right), drag the slider right or left. Here is the explanation:
   • 1px: Left - The Search Bar will be on the left.
   • 2px: Center - The Search Bar will be in the center.
   • 3px: Right - The Search Bar will be on the right.
5. Click the Save button (diskette icon) in the lower right corner.

Search Bar Max Width

This setting is useful for setting the minimum and maximum width for the Search Bar. Here are some steps to customize and some explanations:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced, click Default Options Dropdown and Select Navbar Options.
4. Look for the Option named Search Bar Max Width, drag the slider right or left until you find the Search Bar width you want.
5. Click the Save button (diskette icon) in the lower right corner.

This setting only works on the desktop screen.

Search Bar Corner Radius

This setting is useful for setting the rounded corner radius for the Search Bar. Here are some steps to customize and some explanations:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced, click Default Options Dropdown and Select Navbar Options.
4. Look for the Option named Search Bar Corner Radius, drag the slider right or left until you find the corner radius you want.
5. Click the Save button (diskette icon) in the lower right corner.

This setting only works on the desktop screen.

Color Settings for Header or Navbar

There are several color settings for the Header or Navbar that can be customized, namely:

1. Navbar Background Color - To set the Background color on the Header or Navbar.
2. Navbar Text Color - To set the Text color including Buttons on the Header or Navbar.
3. Navbar Edge Border Color - To set the Edge Border color on the Header or Navbar.

Here are some steps to customize it:

1. Go to Blogger Dashboard and select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced, click Default Options Dropdown and Select Navbar Options.
4. Find a color setting and select the color you want to change.
5. Click the Save button (diskette icon) in the lower right corner.

Those are some steps to configure the Header or Navigation Bar in Webium Pro Theme. If you have any questions, please write them in the comments section.