Astra Above Header Module Explained: Flexible Extension of Header Information Presentation

02622186

Astra Pro The Above Header module in the plugin provides a flexible and customizable display area for top site content. It sits above the main navigation and is often used to display contact numbers, social icons, additionalmenu, search function, etc. Combined with Astra The Header Builder makes it easy to set up different layouts and content on desktop and mobile devices, enhancing the clarity of the site structure and the efficiency of information delivery.

Image [1]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area

Layout Options for Above Header

Astra Two base layouts are provided:

  • Layout 1: Split Above Header into left and right sections, Section 1 on the left and Section 2 on the right, suitable for dual-content display.
Image [2]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area
  • Layout 2: Keep only the center area to focus on one core content, e.g., promotions, announcements, etc.
Image [3]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area

In the Header Builder, the Above Header is actually the first row of elements, which can be dragged and dropped as needed.

Supported added content types

Menu Navigation
The menu can be assigned to the upper header position. In the "exterior condition > customizable > menuAfter creating the menu in "Above Header Menu", select "Above Header Menu" as the display location, which is suitable for displaying additional navigation.

Image [4]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area
Image [5]-Astra Above Header Module Explained: Creating a Flexible Top Message Display Area

search button
The search icon can be enabled and displayed when clicking on the iconlook for sth.box to improve the efficiency of users to find content quickly.

Image [6]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area

Text or HTML content
Support for customized text and HTML, e.g. inserting email address, contact number, buttons, etc., is suitable for displaying key information.

Image [7]-Astra Above Header Module Explained: Creating a Flexible Top Message Display Area

Widget Components
Support for adding WordPress Content generated by default widgets or third-party plug-ins, such as login window, language switching, weather components, etc. The entry point is "Appearance > Customize > Widgets".

Image [8]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area
Image [9]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area

Appearance Style Settings

Borders and Height
The bottom border color and width can be customized to make Above Header more hierarchical; meanwhile, the overall height can be adjusted by slider to meet different design requirements.

Image [10]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area
Image [11]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area

Colors and backgrounds
Go to "exterior condition > customizable > head > Above Header", you can set the background color, text color, link color, hover color and other content to keep the style unified.

Image [12]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area

Mobile Responsive Settings

  • alignment: Section 1 and Section 2 can be set to "side by side"or"stackable"Display, adapted to different screen widths
  • menu tag: Add text labels to mobile menus to improve navigation clarity
Image [13]-Astra Above Header Module Explained: Creating a Flexible Top Message Display Area
  • Merge menu function: Consolidate the upper menu into the main navigation to save space by centralizing all navigation options on a small screen
Image [14]-Astra Above Header Module Explained: Creating a Flexible Top Information Display Area

summarize

Above Header Yes Astra Pro Above Header provides an advanced functionality module that offers a rich variety of layouts and content configurations for displaying information at the top of the site. Whether it's inserting secondary menus, contact information, search boxes, or displaying promotional information, all can be flexibly realized through Above Header. Combined with responsive settings and style customization, the site maintains a consistent visual and structural presentation across different devices.

Related articles


Contact Us
Can't read the article? Contact us for free answers! Free help for personal, small business sites!
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
This article was written by: thieves will be rats and mice courage

Link to this article:https://www.361sale.com/en/49636
The article is copyrighted and must be reproduced with attribution.

THE END
WordPress TutorialWP Theme DecorationWP self-taught website builderWordPressWordPress Themes
# Astra Theme# Astra Pro# Above Header
If you like it, support it.
kudos186 share (joys, benefits, privileges etc) with others
Thief will be the rat's guts avatar - Photon Fluctuation | Professional WordPress repair service, worldwide, rapid responseDiamond Member
Recommended
commentaries sofa-buying

Please log in to post a comment

    No comments

User cover
Thief will be the rat's guts avatar - Photon Fluctuation | Professional WordPress repair service, worldwide, rapid responseDiamond Member
文章目录
鲜嫩爽口大肥蛆的头像-光子波动网 | 专业WordPress修复服务，全球范围，快速响应

鲜嫩爽口大肥蛆4月21日 15:140

通过 FTP 禁用插件： 重命名 wordfence 插件文件夹，解除封锁。 后台解封 IP： 若能进入后台，去 Wordfence → Tools → Live Traffic 解封被拦 IP。 调整防火墙设置： 设置为“学习模式”，并将自己 IP 加入白名单。 必要时更换插件： 替换为 iThemes Security 或 All In One WP Security。
Thief will be the rat's guts avatar - Photon Fluctuation | Professional WordPress repair service, worldwide, rapid responseDiamond Member

lit. a thief will have the guts of a ratBadge - Little known - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast ResponseApril 18, 16:430

That's a good name.
Kind rural people's avatar - Photon Fluctuation | Professional WordPress repair service, worldwide, rapid response

Kind Rural PeopleApril 18, 11:390

When a plugin conflicts with a theme resulting in a slow loading page, you can troubleshoot the conflict one by one by disabling the plugin, updating the plugin and theme versions, adjusting the plugin settings to reduce resource consumption, troubleshooting the problem by using compatibility checking tools such as "Health Check & Troubleshooting", and enabling caching plugins and optimization tools to improve the performance of your website and ensure plugin and theme compatibility and fast loading of the site.
Riding a great aunt's avatar - Photon Fluctuations | Professional WordPress repair services, worldwide, rapid response

take advantage of sb's great aunt and uncleApril 17, 19:320

When WordPress displays "Sorry, you don't have permission to access this page", it's usually because the account permissions have been changed incorrectly. There are two ways to fix it: if you can access the database, you can change the user permissions field in phpMyAdmin to restore your administrator status; if you can't log in to the backend or manipulate the database, you can also add code to the functions.php of the theme temporarily via FTP to create a new administrator account to log in to the backend and fix the permissions. Both methods are effective in restoring access rights, and it is recommended to backup website data before operation.
Lexer's Avatar - Photon Flux Network | Professional WordPress repair service, worldwide, fast response

RexhausenApril 16, 17:391

If the Elementor editor keeps getting stuck in the loading screen or appears blank, don't worry, this is actually quite common and is usually caused by caching, plugin conflicts, theme issues or lack of memory. You can try to check it step by step: First, open Elementor's "Safe Mode" to see if there is any plugin or theme conflict. Temporarily disable the caching plugin, and clear your browser and website cache at the same time. Try switching your theme to the WordPress default theme, such as Twenty Twenty-Four, and test to see if the editor opens properly. Check if the PHP memory in Elementor > System Info is at least 256M, if not, ask your server administrator to increase it. Use your browser's developer tools (press F12) to see if there are any red errors, which will help you locate the problem faster. Make sure Elementor and your installed plugins are up to date, sometimes version mismatches can cause problems. Finally, clicking "Regenerate CSS" in Elementor > Tools can sometimes fix loading issues. If you've tried all of these things and it doesn't work, you'll need to look at your server's error logs, or send it to Elementor's technical support to take a look at it. Most of the time this problem is solved, so don't worry about it too much.
Small soldier's avatar - Photon Fluctuation Network | Professional WordPress repair service, worldwide, rapid response

skirmishersApril 15, 16:170

The common reasons for WordPress editor to lose content after saving include plugin or theme conflicts, cache issues, database write failures, REST API blocked or browser interference. It is recommended to check plug-ins, clear cache, switch the default theme, check the site health and debugging logs in order to locate the problem step by step.
Thief will be the rat's guts avatar - Photon Fluctuation | Professional WordPress repair service, worldwide, rapid responseDiamond Member

lit. a thief will have the guts of a ratBadge - Little known - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast ResponseApril 14, 17:590

If custom fonts are not working in WordPress, it may be due to incorrect font file paths, incorrectly applied CSS selectors, incompatible font formatting, or CSS prioritization issues. Ensure that the font files are loaded correctly and in a compatible format, and check that the CSS rules are applied correctly to the target element. If theme settings override custom fonts, adjust the relevant settings as well. Also, clear the cache and use the browser developer tools to check if any other CSS rules override the font settings.
Zhejiang spotted hyena avatar - Photon Fluctuation | Professional WordPress repair service, worldwide, rapid response

Zhejiang spotted hyenaApril 14, 17:111

Database Operation: Use SQL query to delete all metadata related to All in One SEO from wp_postmeta table. Plugin Reset Function: Find the option to reset or clear data in the All in One SEO plugin settings. WordPress CLI: Use the command line tool to bulk delete metadata related to the plugin. Manual Removal: Remove SEO information one by one through the WordPress backend edit page.