Configuring the Header or Navigation Bar in MateMagz Theme

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

Navigation Drawer Menu

In the Header or Navbar, a hamburger icon button will appear to open the Navigation Drawer Menu. The Navigation Drawer Menu Toggle button in the Header will appear when you have enabled and set the menu items for the Navigation Drawer Menu.

More documentation on the Navigation Drawer Menu will be described in a separate section in Configuring the Navigation Drawer Menu.

Blog Logo, Title and Secondary Title

You can change and customize Blog Logo, Title and Secondary Title (Description) easily. There are several options that can be adjusted to your liking.

Here are some steps to set the Blog Logo, Title and Secondary Title:

1. On the Blogger Dashboard, select the Layout menu.
2. Look for the section titled Header Logo and Title.
3. Click the edit button (pencil icon) on the Header (Page Header Gadget) and 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 Secondary Title of your Blog. You can also leave it blank.
6. In the Image section, there is two Radio Button Options. Choose between the Input image URL or Upload an image from your computer. Here is the explanation:
   • Input image URL - You need to paste the uploaded image URL into the Image URL 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 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 show the Blog Title only.
   • Instead of title and description - To show the Blog Image or Logo only (Without the Blog Title text).
   • Have description placed after the image - To show both (Image and Blog 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, the actual Blog Title text will only be hidden (Not Deleted) this is because the 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.

Color Mode Toggle Button

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

You can enable or disable the Color Mode Feature easily. More documentation on the Color Mode will be described in a separate section in Configuring Features.

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 in Header or Navbar. Here are some steps to customize and some explanations:

1. On the Blogger Dashboard, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced > 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.

Navbar Edge Style

This setting is useful for changing the Header or Navbar edge style. Here are some steps to customize and some explanations:

1. On the Blogger Dashboard, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced > Default Options Dropdown and Select Navbar Options.
4. Look for the Option named Navbar Edge Style (None | Border Bottom | Shadow), drag the slider right or left. Here is the explanation:
   • 1px: None - Header or Navbar without any edge styles.
   • 2px: Border Bottom - Header or Navbar with border at the bottom.
   • 3px: Shadow - Header or Navbar with shadow at the bottom.
5. Click the Save button (diskette icon) in the lower right corner.

Navbar Edge Shadow Thickness

This setting is useful for adjusting the thickness of the Shadow on the Header or Navbar. Shadow thickness is measured in dp units.

Note that this setting is only useful if you have set the Navbar Edge Style to 3px (Shadow).

There are three options that you can choose from, including 2dp (Thin), 4dp (Medium) and 6dp (Thick). Here are some steps to customize and some explanations:

1. On the Blogger Dashboard, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced > Default Options Dropdown and Select Navbar Options.
4. Look for the Option named Navbar Edge Shadow Thickness (Thin | Medium | Thick), drag the slider right or left. Here is the explanation:
   • 1px: Thin - Header or Navbar with Shadow Thickness 2dp (Thin).
   • 2px: Medium - Header or Navbar with Shadow Thickness 4dp (Medium).
   • 3px: Thick - Header or Navbar with Shadow Thickness 6dp (Thick).
5. Click the Save button (diskette icon) in the lower right corner.

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. On the Blogger Dashboard, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced > 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.

Color Settings for Header or Navbar

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

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

Here are some steps to customize it:

1. On the Blogger Dashboard, select the Theme menu.
2. Click the CUSTOMIZE button.
3. Click Advanced > 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 MateMagz Theme. If you have any questions, please write them in the comments section.

If you want to report some bugs, you can write them in the comments section on the Bug Report page and if you want to request new features or want to provide feedback, please write them in the comments section on the Request and Feedback page.