Header Settings
Last updated
Last updated
There are Header settings available in the Customize section of the Appearance menu in the WordPress dashboard or from your website page. These settings let you set up the visuals of the Header in the MasterStudy Templates.
To access these settings, first navigate to your WordPress dashboard. Look for the "Appearance" tab on the left-hand sidebar and click on it. A dropdown menu will appear with several options, select "Customize" from this list.
Within the Customizer, navigate to the "Header Settings" section. Here, you’ll find various settings to adjust your site’s header.
Another method to reach the Header Settings is directly from your website's front end for a more intuitive approach for adjustments while viewing changes live. Here’s how you can proceed:
Visit your website’s homepage while logged into your WordPress account. You should see a bar at the top of the page — this is the WordPress toolbar.
On this toolbar, locate the "Customize" option. Clicking on it will transport you directly to the Customizer interface.
Within the Customizer, navigate to the "Header Settings" section. Here, you’ll find various settings to adjust your site’s header.
There are three sections available in Header Settings:
Global
Search
Authorization
The Global section in the Header Settings comes with several settings to enhance the visual appearance of your site’s header. Here’s a breakdown of the available settings:
Logo: This setting allows you to upload and display a custom logo in the header of your site.
Logo width (px): Adjust the width of your logo in pixels.
Logo height (px): Similar to the logo width, this setting controls the height of your logo in pixels for a balanced aspect ratio.
Menu Link color: Customize the color of the links in your site’s menu.
Link active and hover color: Define the color for active links and on hover states.
Separator line color: This setting lets you choose the separator color.
Font size (px): Set the size of the font for the text in the header in pixels.
Line height (px): Adjust the height between lines of text in the header.
Font weight: Choose the weight of the font for the header text.
In the Search section, you have settings available to set up the search bar within your site's header. Here’s a breakdown of the available settings:
Search placeholder: Customize the placeholder text within the search bar to guide your users or to reflect the content of your site.
Presets: Select the appearance of the search button and field with options such as:
Button Inside: The search button is integrated inside the search field.
Button Outside: The search button is placed outside and next to the search field.
Button Inside Left: Similar to Button Inside, but the button is positioned on the left.
Compact: A minimal and compact design for the search functionality.
Show popup: Toggle this option to display search results in a popup within the header area.
Button background color: Customize the background color of the search button to match or contrast with your site's design theme.
Button color: Adjust the color of the search button's icon and text.
Categories: Enable a category filter within the search bar for users to narrow down their search based on categories.
Category button color: Customize the text color of the category selection button.
Category button bg color: Set the background color for the category selection button.
Category dropdown color: Adjust the text color within the category dropdown menu for clearer readability or aesthetic reasons.
Category dropdown bg color: Change the background color of the category dropdown menu to either stand out or blend in with the overall design of the search area.
The Authorization section is dedicated to settings related to user Login and Sign up links in the header.
Sign Up Icon Background Color: Choose the background color behind the sign-up icon.
Icon Color: Select the color of the sign-up icon itself.
Icon Width (px): Set the width of the sign-up icon in pixels.
Icon Height (px): Determine the height of the sign-up icon in pixels.
Icon Size (px): Adjust both the width and height of the sign-up icon together in pixels.
Link Text: Enter the text for the link.
Link Font Size (px): Specify the font size of the sign-up link text in pixels.
Link Color: Choose the color of the sign-up link text.
Link Hover Color: Define the color of the sign-up link text when hovered over by the cursor.
Login Icon Size (px): Specify the size of the login icon in pixels.
Icon Color: Choose the color of the login icon.
Text Size (px): Set the font size of the login text in pixels.
Text Color: Define the color of the login text.
Text Hover Color: Determine the color of the login text when hovered over by the cursor.
Background Color: Select the background color behind the login icon and text.
After you finish the customization, click the Publish button to enhance and save the changes to your site.
