Astra Above Header Bars

Share:

First off, I love using Astra. I use it for all of my clients and pair it with Elementor. It has a multitude of different functionalities, including Mobile Menu customization, customization with colors and backgrounds, sticky headers, different page headers for areas of your site, etc. It’s universal and overall great for general use. And the Astra above header gave me the capability to fix my client’s problem, as you’ll read below.

I was recently working with a client, Finaptive. They had more than a handful of customizations that I hadn’t yet worked with, mostly regarding the menu and header.

Above Header Issue

The main issue I ran into was that Astra offers a “below header” option, but they don’t offer an “above header” option when it comes to borders. Guess what? My client needed that above header option. Normally, I would have created the header in Elementor, but we were running out of time, and we needed the different logo transition (sticky header) as the user scrolled down the screen.

My fix was to create an Above Header area. It gives you the options to place a Widget, Text Area/HTML, Search bar, or Menu in this area. I chose the HTML and filled the space with   (HTML for a space). If you leave the area blank, the live site displays a message in the Above Header area “Add your Text/HTML here” in bold, black letters.

Once I’d done that, I set the background to the brand’s red. Unfortunately, the Above Header option doesn’t run below 30px. Even if you type in 10px, it’ll revert itself back to 30.

This is where the fix, and the reason for this article, comes in.

Although the client liked the 30px line at the top of the desktop site, when we switched to mobile, the area blew up and took up half of your phone’s screen space. We’d have to use some custom CSS to fix this issue, remove the automatic Astra padding from the header, and manually set the height for the bar.

The Solution

Pop into the page’s HTML using Inspect Element or View Source, and you’ll see which classes you’ll need to include. Pop this into the CSS, and you’re good to go.

.ast-header-break-point .ast-above-header-mobile-inline .above-header-2 .ast-above-header-section-1{
     padding:0;
     height:10;
}