Configuring the Header or Navigation Bar in Materia X2 Theme

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

Navigation Drawer Menu

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

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.
   In Materia X2 version 3.0 and above, the Blog Description input will appear as a 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.

Search Bar and Search Button

The Search Bar element consists of a Submit Button, Search Input, Clear Search Input Button 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.

The button to clear the text in the search input will appear if you write something into it.

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.

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. 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 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. 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 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.

Navbar Button Corner Radius

This setting is useful for setting the rounded corner radius for the buttons on Navbar (Except Search Bar Button). 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 Button 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.

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.

Search Bar Visibility on Desktop

This setting is useful for enabling or disabling the visibility of the Search Bar especially on the Desktop Screen.

If you set the Search Bar Visibility to 1px (Hidden), the search icon will appear, just like how it looks on Mobile screen. 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 OptionsDropdown and SelectNavbar Options.
4. Look for the Option named Search Bar Visibility on Desktop (Hidden | Visible), drag the slider right or left. Here is the explanation:

   

   • 1px: Hidden - Search Bar will be Hidden.
   • 2px: Visible - Search Bar will be Visible.
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. 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.

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. 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 Materia X2 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.