EL Creative
EL Creative
Organization

Configuring the Header or Navigation Bar in NoUI Theme

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

The Header or also known as the Navigation Bar (Navbar) consists of several elements such as the Blog Logo Image, Title, Description or Tagline, Search Button, Dark or Light Mode Toggle Button, etc.

Blog Logo, Title and Description/Tagline

Here are some steps to set the Blog Logo, Title and Tagline/Description:

  1. Go to Blogger Dashboard and select the Layout menu.
  2. Look for the section titled Header > Brand.
  3. Click the Edit button (pencil icon) on the Header (Page Header Gadget).
  4. A Header Configuration Popup will appear.
  5. In the Blog Title input, enter the name of your blog.
  6. In the Blog Description input, enter your blog Tagline/Description.
  7. In the Image section, there is two Radio Button Options. 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.
  8. 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 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 Blog Image or Logo, Blog Title and Blog Tagline/Description.
  9. You can skip the Shrink to fit option. Even if you set it, it still does not have any effect on the image;
  10. If so, click the SAVE button.

Information:

  • If you set Image Placement to Instead of title and description (To show 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.

Main Menu in the NoUI Theme can be arranged easily. Generally, the Main Menu consists of important links to navigate to specific pages on the Website.

You can add, remove or edit menu items in the Main Menu by following these steps:

  1. Go to Blogger Dashboard and select the Layout menu.
  2. Look for the section titled Header > Main Menu.
  3. Click the edit button (pencil icon) on the Main Menu  (Link List Gadget).
  4. A Link List Configuration Popup will appear.
  5. You can skip the Title and Number of items to show in list input or leave it blank.
  6. In the Sorting section, you can choose between Don't sort, Sort Alphabetically or Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
  7. To add a new menu item, click the ADD A NEW ITEM button. Here are a few things that can be set:
    • In the Site name input, enter a menu name.
    • In the Site URL input, enter the menu URL.
    • If both inputs are set, click the SAVE button next to them.
  8. Repeat step 7 if you want to add more Menu Links.
  9. If you want to finish the configuration, click the SAVE button at the bottom.

Search Dialog and Content

The NoUI theme has a Search Form in the Dialog which can contain content in it. This content can contain several links such as posts or links.

You can configure the content by following these steps:

  1. Go to Blogger Dashboard and select the Layout menu.
  2. Look for the section titled Search Dialog Content;
  3. Click the edit button (pencil icon) on the Popular Posts (Popular Posts Gadget).
  4. You can configure it directly.
  5. If you want to finish the configuration, click the SAVE button at the bottom.

Dark/Light Mode

In the NoUI theme, the Toggle Light/Dark Mode button will appear if you have enabled the Dark/Light Mode feature. If this feature is disabled, the button will also automatically disappear.

More information about this feature can be seen on the Color Mode page.

Options for Header or Navbar

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

Translucent Header

This setting is useful for enabling or disabling Transparent Background in 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 Header Options.
  4. Look for the Option named Translucent Header (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - The Translucent Header will disabled.
    • 2px: Enable - The Translucent Header will enabled.
  5. Click the Save button (diskette icon) in the lower right corner.

Tagline or Description

This setting is useful for enabling or disabling Blog Tagline/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 Header Options.
  4. Look for the Option named Tagline or Description (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - The Blog Tagline/Description will be hidden even if you have entered the Blog Description input.
    • 2px: Enable - The Blog Tagline/Description will be visible.
  5. Click the Save button (diskette icon) in the lower right corner.

Information:

  • Tagline or 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 Tagline or Description by removing the Blog Description text in the Header Gadget.

This setting is useful for adjusting the alignment of the Main Menu to the Header or Navbar, especially on the Desktop Screen. Here are some adjustment steps 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 Header Options.
  4. Look for the Option named Main Menu Alignment on Desktop (Left | Center | Right), drag the slider right or left. Here is the explanation:
    • 1px: Left - Main Menu alignment will be on the left side.
    • 2px: Center - Main Menu alignment will be in the middle.
    • 3px: Right - Main Menu alignment will be in the right side.
  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:

  • Header Background Color: To set the Header Background Color.
  • Header Text Color: To set the Header Text Color.
  • Header Meta Color: To set the Meta Color.
  • Header Border Color: To set the Header Border Color.
  • Main Menu Text Color: To set the Main Menu Text Color.
  • Main Menu Text Hover Color: To set the Main Menu Text Color when the cursor hovers.
  • Search Dialog Background Color: To set the Search Dialog Background Color.
  • Search Dialog Text Color: To set the Search Dialog Text Color.
  • Search Dialog Text Hover Color: To set the Search Dialog Text Color when the cursor hovers.
  • Search Dialog Border Color: To set the Search Dialog Border Color.

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 Header 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. If you have any questions, please write them in the comments section.

Tags: NoUI Documentation
Comment
Share

Sign In

By continuing, you agree to our User Agreement and acknowledge that you understand our Privacy Policy.

Sign in with Google

Or, Sign in with

Forgot Password|Sign Up