Configuring the Header or Navigation Bar in Materia X2 Theme

Header or Navigation Bar (Navbar) configuration in the Materia X2 theme.
Yasya El Hakim

Configuring the Header/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 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. 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 and Title

You can change and customize Blog Logo and Title easily. 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.
  2. Select the Layout menu.
  3. Look for the section titled Header Logo and Title.
  4. Click the edit button (pencil icon) on the Header (Page Header Gadget).
  5. A Header Configuration Popup will appear.
  6. In the Blog Title input, enter the name of your blog.
  7. In the Blog Description input, enter your blog description.
  8. 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.
  9. 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 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 both (Image and Blog Title).
  10. You can skip the Shrink to fit option. Even if you set it, it still does not have any effect on the image.
  11. If so, click the SAVE button.
Information:
  • The Blog Description input will not be displayed on the page but will only be used for Meta Tags. Further documentation on Meta Tags will be explained further on the Meta Tag Configuration page.
  • 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.

Search Bar and Search Button

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

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.

You can choose between Toggle Switch Dark-Light Mode or Toggle Color Mode with Multiple State (Dark, Light and System Mode).

More documentation on the Color Mode will be described in a separate section in Configuring Features.

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.

More documentation on the More Menu will be described in a separate section in Configuring 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 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.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced, click Default Options Dropdown and Select Navbar Options.
  5. 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.
  6. Click the Save button (diskette icon) in the lower right corner.
Information:

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.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced, click Default Options Dropdown and Select Navbar Options.
  5. 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).
  6. 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.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced, click Default Options Dropdown and Select Navbar Options.
  5. Look for the Option named Search Bar Max Width, drag the slider right or left until you find the Search Bar width you want.
  6. Click the Save button (diskette icon) in the lower right corner.
This setting only works on the desktop screen.
This setting only available on Materia X2 v3.0 and above.

Search Bar Visibility on Desktop

This setting is useful for enabling or disabling the visibility of the Search Bar especially on the Desktop Screen. Here are some steps to customize and some explanations:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced, click Default Options Dropdown and Select Navbar Options.
  5. 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.
  6. Click the Save button (diskette icon) in the lower right corner.
This setting only works on the desktop screen.
This setting is only available on Materia X2 version 3.0 and above.

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.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced, click Default Options Dropdown and Select Navbar Options.
  5. Look for the Option named Search Bar Corner Radius, drag the slider right or left until you find the corner radius you want.
  6. 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 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.
Information:
  • The Navbar Edge Border Color setting is only useful if you have set the Navbar Edge Style to 2px (Border Bottom).
  • The Navbar Edge Shadow Color setting is only useful if you have set the Navbar Edge Style to 3px (Shadow).

Here are some steps to customize it:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced, click Default Options Dropdown and Select Navbar Options.
  5. Find a color setting and select the color you want to change.
  6. 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.

Yasya El Hakim
404 Not Found!
Comments
To add an image:
[image] image_url [/image]

To add a code block:
[code] your_code [/code]

To add a quote:
[quote] your_quote [/quote]

To add a link:
[link] your_link_text | link_url [/link]
Admin Comment Poster
Thanks Man!
Jagat_help_Facts Comment Poster
Hi
Creative Templates Comment Poster
nice theme
this is a reply
Lik Di kin Comment Poster
Saya masih pakai 2.4. Yang ini kapan dikirim mas?
Mohon tunggu ya mas, nanti akan dikabarkan lebih lanjut.
Sudah dikirim ya mas versi 2.5 nya.