How To Setup Headers With Astra Theme – Normal, Transparent, Sticky, & More

by Adam @ WPCrafter   |   Last Updated: December 27, 2017
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Learn all the option to make beautiful headers using the Astra WordPress Theme in this full tutorial video.

Video Transcript

In this video working to talk about Astra
in the headers of your Astra website is going

to be an in depth tutorial hi my name is Adam
from WPCrafter.com where release it to the

content to help you get better results with
WordPress faster if you’re new here consider

clicking on the subscribe button and if you
want video notifications click off to the

little bell off to the right of the subscribe
button and you too will let you know when

I have a new video up and everything that
I talk about will be linked in the video description

box so this is good to be an in-depth tutorial
about the Astra Theme and all the various

options with the header I mean there are so
many different ways it nowadays to have a

header on your website you can have the one
that your theme generates you can make one

with the page builder Astra Pro has some options
for transparent headers and sticky headers

different dynamic page headers are so many
different options every single one is going

to be covered in this video remember this
is a tutorial series on the Astra Theme in

the video description box I have a link to
the playlist so you can watch all of the Astra

theme tutorial videos so that’s it for this
intro let’s get into the tutorial now I’m

going to be going over all of the options
and there are a ton of options for headers

with the Astra Theme and I am going to go
through them all in this video so there’s

always a couple things when it comes to headers
that you need to keep in mind in the first

one is the most obvious one and that’s the
mobile responsiveness so it’s one thing to

have a header for the desktop version of your
website but also what’s most important is

house again a look when it is now on a mobile
device and scrunched in together and the other

thing we want to keep in mind is something
called schemas here can you hear me say this

schema phrase and essentially what schema
is is it’s different bits of code on your

website that let Google know or a search engine
crawler no what each portion of your website

is so their schema to tell Google this is
the header this is the main body content this

is the footer etc. etc. so you might hear
me say that word a few times in this video

now typically your header is going to contain
a few standard things number one it’s going

to definitely most likely have your logo and
nowadays you actually have to have two versions

of your logo you have to have the normal version
and you also have to have one in double the

resolution which is known as a retina logo
and thank goodness Astro supports very simply

a way of having an a very efficient way of
having this retina logo automatically display

on displays that are higher resolution which
you find on all mobile devices and a lot of

the newer Mac devices and newer monitors you
have this 4K higher resolution going on she

definitely don’t want your logo blurry the
second item you typically have in a header

is going to be a menu and now menus there’s
other ways of doing it if you’re using for

an example Elementor they just added a menu
creation widget it’s pretty neat a ministry

that in this video and also ultimate add-ons
for Beaver Builder has a menu sorting to talk

about that as well and you may also want to
add a call to action in your header this might

be a button or maybe some kind of format of
your business hours or your business phone

number or something like that to call people’s
attention to and leave that in the header

so these are pretty much the main items are
to find in header and we have lots of different

types of headers now so were going to talk
about in this video your standard header and

this is what’s gonna come in the free version
of Astra just your standard header and you’re

going to have several different options available
with that then with that we also have something

called the sticky header and that is when
someone scrolls down the page it will stick

to the top your header so those menu options
in that call to action information is always

there on the page we also have transparent
headers and these are what you see actually

right now on the Astor website is transparent
so what’s created in the page builder there

in the background is kind of pulled up and
your logo in your menu and your call to action

in this case it’s the button just appears
on top of that bit of contents already talk

about transparent headers and how to turn
that on you can also put a menu in a header

via a short code so you may want to do this
if you have the Elementor Pro and you want

to make your menu in that you can you can
do that in order to talk about that and lastly

is creating the entire header itself with
Elementor or Beaver Builder so essentially

using your page builder to build out the entire
header and working to talk about that as well

actually working to start on that because
I think that’s a good place to start so I’ll

make sure I die differentiate what is done
with the free version of Astra and what is

that as it requires the aid or Pro version
of Astra Sites and let me just look at that

right now my click here on Astra Pro so the
transparent header this is with the Pro add-ons

for Astra I do know that the developers of
aster are considering adding this to the free

theme and that is a big possibility sticky
header that’s going to be in the pro page

headers this is one way of implementing the
transparent header and this is a pro feature

and when I scroll down right here there is
more header designs and this is coming soon

right now you’re going to see in this video
there’s only three header designs however

they are going to expand that and a with the
later add-on for the probe and I will guarantee

be putting out a video right right when they
release that demonstrating the new headers

and actually with that I just want to preface
I should’ve said this in the very beginning

of the video this is can be one of those videos
or you’re gonna want to look at the video

description box not only do I have the link
to Astra Theme but that’s remedy keep you

updated because a lot of these things I’m
talking about are subject to change and they’re

not gonna change for the worse they would
only change for the better so I was actually

in a release this video yesterday and the
reason I didn’t is because I was waiting on

a little bit of information and I do know
some things are going to change I’ll make

sure as I’m demonstrating them in this video
that I let you know that this may change and

it might be more simple to do in the future
with an upcoming update to the plug-in and

I will make new videos on how to do just those
particular parts and I will link that in the

video description box and I’ll also put it
in the pinned comment that’s the first comment

in the comment section so like I said I’m
going to start with using your page builder

to build out your header so here I am back
on that website that I’m using to demonstrate

everything now to to add a header that is
built with your page builder it super easy

you’re going to need the this plug-in right
here header footer Elementor or Beaver Builder

header footer depending on the page builder
you’re using so if you can use Elementor to

be this if you’re going to use Beaver Builder
it will be this one if we look back here on

my website I have both of them installed so
I am good activate one of them at a time and

demonstrated for you now this is one of those
items that is subject to change this will

work with the free version of Astra perfectly
fine I do know that they are going to build

enhanced functionality for the Pro version
of Astra so right now the way it works is

when you create a header or a footer using
this it will be global across your entire

website what they’re adding is the same ability
to create these headers or footers but you

will have page targeting meaning you can just
have it appear on certain portions of your

website so to be more dynamic so it’s that’s
getting here I’m in a start here him and activate

header footer Elementor now here is the trick
with this Elementor so pico let let’s just

go there for someone to go to appearance and
there’s this new option header footer builder

now when I look at here I can go ahead click
on add new and I’ll just go ahead and name

this header and then I’ll go ahead and click
on publish this is actually very nice I did

a video on this plug-in recently and this
option wasn’t here by default it looks like

it is there now so essentially you want to
make sure this button will be here this edit

with Elementor or edit with pay with Beaver
Builder will see exactly how that looks when

we do it with Beaver Builder in a moment so
what we do next is we would just choose what

you are creating a header or footer say it’s
a header you would choose that go-ahead click

on updates and then right now all you have
to do is click right here it says edit with

Elementor it’s going to pop this open inside
of Elementor in you can literally you started

building your header so what you probably
want to do is you would want to click on add

a new section and you might want to be like
this and you could resize this drag your image

here and drag your navigation option right
there now the navigation widget here for Elementor’s

only in the Pro version so anyways I’ll scroll
down here so essentially you would just want

to go ahead and create an image right there
and pop that in and then you would want to

go back and let’s find that now have menu
right there I’ve already created a menu let’s

just it’s right here it’s main and then you
just want to style that out so for this example

I’ll just push it off to the side that both
Beaver Builder and Elementor have some centering

options we go ahead and add a logo here someone
to delete the default logo I have the Astro

logo here on my website so let’s see the new
go ahead and click on this plus to drag my

Astro logo in a click on insert media and
there it is there’s the logo here is everything

so I can shrink it down like that now there’s
alignment issues in this is just the way that

page builders work both Beaver Builder and
Elementor have an option to send her everything

vertically so this right here needs to be
centered vertically if you see right now it’s

kind of more to the top will you do that in
Elementor as you click on the column options

right here it says content position and you
would switch at the middle and then now it’s

perfectly in the middle like that and go ahead
and click on save now I’ll get out of here

just like this and I’ll go back to the dashboard
and let’s take a look at the website let’s

see I’m pretty sure I chose this and clicked
on up they limit click update just to be on

the safe side and then I’m going to go ahead
and view the website right now and you can

see there it is I’ve got Astra right here
and here is the menu that I could’ve styled

if I wanted to in Elementor and this will
appear on every single website if I wanted

a background I would’ve added that background
in Elementor but right now it’s left to just

the color that it is and that’s pretty much
all there is to adding a header or footer

customize know what’s going to happen in the
future is this is going to turn into a pro

add-on for Astra and you’ll have page targeting
options here so you can have a separate header

for your blog if you wanted than your regular
pages or a different different options like

that it’s really nice and you have a dynamic
website lie may be an e-commerce website you

can show a different header on the e-commerce
side when someone’s in your shop versus when

someone’s on the rest of your website so I’m
in a go ahead and deactivate this and will

just take a quick look at the Beaver Builder
version so immunity activates and then for

the Beaver Builder one I will activate this
and then go to appearance and I actually don’t

see it listed here is an option I’m wondering
if there is some sort of a conflict because

I’m trying to run both on the same website
so I’m actually not going to do this in Beaver

Builder however it’s the same exact thing
the only negative though with Beaver Builder

is you will need ultimate add-ons for Beaver
Builder because Beaver Builder itself does

not have a menu module so you’re knocking
to be able to build a menu would just Beaver

Builder you will need ultimate add-ons for
Beaver Builder the paid version of this as

well in order to create a menu using Beaver
Builder for the header and the footer now

one other thing is you can also build your
it’s obvious self-explanatory you can obviously

also build your footer this very same way
using this very same method okay so now let’s

take a look at the standard header options
and these are going to be just using the standard

header that comes with your theme and is built
with your theme now everything’s going to

be done in the customizer so let’s go ahead
and go to appearance and then customize and

take a look at our options now I will tell
you my preferred way right now for having

a header is the one that the theme sets up
and controls I’m not into having just yet

to having the page builder do it I am much
more preferring having my website do it now

I know that Elementor is coming out with its
own header and footer builder now and that

comes out of your and Elementor Pro user you’re
definitely going to want to use that or look

into using that because that would give you
your most powerful options but me personally

I much more prefer to use the header that
I’m going to be able to build with my theme

and the reason is because I find that it’s
more mobile responsive or just looks better

on a mobile device so first what I want to
do is I want to let’s look at the options

right here for the logo then will look into
the options here for the menu and then we’ll

get into some of the layouts so for the logo
that’s always pretty much on any WordPress

I can to be under the site identity so right
now it’s showing the site title is not showing

the tagline but if I wanted to show the tagline
you can go ahead and click on the checkbox

in the skin to show the tagline as well this
is not bad if you don’t have a logo and you

just want to have some text in there now one
of the changes coming up in a week or two

you’ll be able to put like a logo icon and
it will appear off to the left of the logo

there so if you don’t have a graphic designer
you can just put some kind of icon relating

to what you do or maybe even a picture of
yourself right here off to the left and then

you can have full control over the text but
that’s not here now so if you wanted to use

an image for your logo most likely you’re
going to want to disable the site title so

will click on that checkbox and you’re gonna
want to disable this tagline just like that

and it’s gonna make them both go away now
the only reason this hasn’t gone away is because

the theme is smart and knows you haven’t uploaded
a logo yet so I’m in a go ahead and click

on select logo and I already uploaded this
Astro logo to go ahead and click on select

whenever you get here just click on skip cropping
and wants to screw it up just click on a skip

per cropping you don’t need to crop anything
so it’s going to refresh right there and obviously

it’s like oh my gosh this is way too big this
is not what I want and luckily there is a

setting underneath here if you haven’t uploaded
your logo in the size that looks good to you

you have this dial here you can go like this
or you can go like this you can make it whatever

size you want so this is actually controlling
the width so you can go like that to to make

it just how you want it so maybe I want that
to be 180 and that’s just how wide I wanted

and that’s all you have to do to get your
logo on the site now for the retina logo this

is what I was talking about where Astra makes
it really simple to have a higher resolution

logo that will automatically show when someone’s
on a high-resolution display so I’m to go

ahead and click on select image and I do have
it right here and I’ll show you that the the

resolution is a lot higher doesn’t need to
be an exact double typically it’s double so

whatever the dimensions are of your normal
logo your retina logo will be double so right

here is the normal one when I click on this
you can see I got my dimensions right here

right there and when I click on the retina
one you can see it kind of is pretty much

a double and that’s fine it could be just
like that some of the go ahead and click on

choose image and we are pretty much set that’s
all it takes to get the logo in their summit

to go ahead and go back and I’m in a go and
set my menu so there’s lots of ways of doing

this you can do in the back end of WordPress
I’ll do it here in the customizer I clicked

on that animate click on Main this is the
menu that I created I just need to assign

it right here to the primary menu someone
go ahead and click on this checkbox and working

to see my menu pop right on in there just
like that and we do a quick save and publish

so this is now set up to have our logo and
our menu now it’s also nice is there’s more

options there’s more things we can do here
and those options are to be found right here

where it says layout so click on way out and
then click on header and you see we have these

different layouts available member I said
there’s three but to the Pro version there

are more layouts coming so you can go with
a kind of a popular layout like this I see

on a lot of blogs and businesses where you
have the logo and then you have the menu underneath

it and then I’m assuming this would be for
your right to left websites but for my purposes

I want the standard logo on the left menu
on the right just like this okay and we are

back now we also have this option right here
and this is really cool this is given us an

option to place some custom element off to
the right of the menu so right now I have

it set to none but if I click right here it
will show me the little search icon you see

up at the little search icon there right now
we also have the option of having it be some

custom text or HTML that I put here in it
by default populates this a button text like

that and we also have the widget so I know
a lot of the Astra Sites demos are leveraging

the widget area to put a button or something
like that in there just like that and later

in this tutorial were actually going to use
this widget to put a custom built menu from

our page builder so you have these options
right here now let me go ahead I’ll leave

that at widget and then I’ll show you the
widget area for it to actually just do it

right now so I’m in a go back and when I go
back one more and I want to click on which

it’s right here and you have this header widget
location so I can go ahead and click on add

widget and I can choose to add anything right
here but typically what you’re gonna want

maybes to add some HTML code or just some
text so if I go down here to the text which

it right here there it is now your probably
not gonna want to give it a title because

if you give it a title can appear above whatever
the main content is so right here I can just

say fill in a phone number and there it is
I put a phone number in and we can even put

a call to act action on the top I just put
call now and I’ve got my phone number and

we can further style this week and center
it we can make parts of it bold we can do

whatever we wanted sex ever obviously looking
a little basic right now I wouldn’t recommend

doing this but it’s really nice and this is
a very unique feature with Astor that it has

this widget area here it’s actually quite
brilliant so let me go ahead I’ll actually

leave that there right now why not so I’m
in a go back into my layout and let’s go back

into my header settings next you can see we
have this border bottom size so that’s just

a thin border here at the bottom and you can
see the way it’s set up by default the kind

of makes it look a little lifted it’s one
pixel in size and it has this color here so

I took that away just like that you can see
it doesn’t have that kind of lifted effect

anymore when you go like this you can see
there is a thin line going across that gives

it that quite lifted look now you can obviously
set this to whatever you want now here is

the width of the header I think it’s up to
you if you want full width or content with

the full width will show you like on the very
left will be your low going on the very right

of the page no matter how wide someone has
their web browser open on the far left will

be the logo on the far right will be the menu
this probably not what you want or you can

definitely give it a shot and try it out so
if you stick the content with it’s always

going to kinda be lined up with the content
on the left and on the right that’s what I

tend to choose but some modern website designs
you do see it go full with like that and that’s

also an option now these next two settings
are with the mobile what the menus can look

like the headers can look like on a mobile
device and I like that there some settings

here so in the customizer you can actually
change the view so if I click right here it’s

gonna switch it immediately to how it’s gonna
look on a mobile device and it’s fairly accurate

so we have this option right here and we can
choose a label for this buttons right now

we have this button when you click on it it
shows everything we could put a label on it

so if I wanted to put menu you can see now
it says menu now for most people they’re going

to know what this hamburger icon is and you
probably don’t need to put menu there but

there is depending on the typical group of
people that visit your website it might be

helpful for to actually say menu okay some
people can get confused and then right here

we have the alignment option so this is in
line and this is stacked so when I switch

to stacked you can see it’s gonna put the
logo at the top the menu at the bottom like

that I I personally prefer in-line just like
this everything on one line so now I’m in

a go back to the desktop view and this is
pretty much all the options for the just having

a standard header that your theme controls
in all of these options are actually available

in the free version of asteroids pretty pretty
flexible if he asked me to have all of these

options available now these styling controls
are available in the Pro version and this

should be the colors of these fonts the fonts
themselves all of that those are going to

be options that are available in the colors
and background so I can choose that and then

right here we can choose the different menu
colors and this is nice to have all these

options and you can also go here and change
the background color but you could do the

background color in the free version of Elementor
as well and let’s take a look at the topography

single topography then choose menu and you
have full control over the topography right

there but also if I had the site tagline and
the site title enabled right here there would

be options in here to change those sponsors
actually do that really quick so many go here

I’m anew enable the site title and I’ll enable
the tagline there to show underneath it like

I said there can actually move it to be in
line with the logo which I think is a much

better option and then I can go into topography
here I believe it’s the header option there

it is you notice how the header option and
topography wasn’t there a second ago and that’s

because if you don’t have it enabled why even
show you the option that’s one of the beautiful

things about the Astra Theme is it smart like
that and you can do the same thing for the

colors in go colors and then header and before
remember you just had the background color

but now because it’s enabled you also have
the site title options right here so this

could be perfect for someone that doesn’t
have a logo yet but definitely wants to have

some branding and options for the text that
shows so let me go ahead and disable these

two like that and I will go back so this is
pretty much your standard header and this

is what comes the free version of Elementor
so let’s go ahead do is click save and publish

and now let’s go ahead and look at the options
for having a sticky header there can be found

by clicking on layout and then sticky header
right here and then here’s an option to enable

that sticky header and remember this is just
an option found in Astra Pro so right here

you would choose if you wanted to have a different
logo for the sticky header you can do that

right here and you can also put a retina version
let’s back up a bit and actually demonstrate

it so you can see when I scroll now it sticks
a little and it kinda has that lifted affects

like that let’s see that okay so now it’s
of these options so you can have the logo

change if you wanted to could be smaller different
size a different logo and the reason why you

might want it to be of different logos wells
because you meant maybe you want the background

color to be a different background color when
you scroll or something like that or have

some opacity or anything like that so you
have the with options now in order to use

these dials you will actually have to put
a logo or assign a logo in here so let’s go

ahead and do that because I ready have it
so right here is the normal logo and then

right here is my retina logo and when I scroll
down let’s make the logo smaller than it would

be so now you see there are options to change
the size so say I wanted this to be a little

smaller like that so now there’s a little
bit more of a dramatic effect in the size

when I start scrolling up or down okay but
you have to have the sticky logo assigned

to be able to change that those properties
next is this background opacity this is how

see-through it is so you could adjust this
to whatever you want so it’s wide but then

as soon as I do that you see how it’s kind
of see-through so you have those options right

there let me go ahead and make that reset
and then there’s the shrink effects so if

you notice that there’s that momentary shrinking
going on but you can disable it right here

I like it so I would keep it you see others
let there’s no animation or effect going on

there so there it is I like to keep that there
now we also have these other animation effects

we can do I prefer none personally but you
can have a fade actually fade might not be

so bad so here it is you see how it fades
in and I scroll down a little bit and then

it just kinda fades in that’s not bad right
there and then here’s the slide option okay

someone a scroll down and you see how just
kind of slides down so you definitely have

a ton of great animation options there as
well and actually I like this right here hide

on the scroll down so what this is going to
do is when you are scrolling down it’s hidden

but the minute you start to scroll up then
it shows this is also been referred to as

a smart scroll header cc like that and I think
this is the option I would choose mostly because

it keeps the header out of the way of someone
scrolling down the obviously don’t need the

info in the header but then when they start
to scroll up that’s usually when they want

to scroll up to the top and then that’s when
it’s a good idea to make those options available

so that is a really cool option right there
and lastly for the sticky header we have these

display options if you just wanted on a desktop
and typically you just wanted on a desktop

you don’t wanted to also show on a mobile
device because mobile device are already dealing

with limited space so you might not want it
personally I only prefer the desktop but you

can do it on a mobile if you wanted to and
you have these options right here which I

think are awesome so this is actually a pretty
deep feature set for the sticky header I am

so glad that they put all of these options
are these are every option that I could think

of wanting with a sticky header but I want
to turn it off so I can continue on in this

tutorial so now let’s talk about having a
transparent header some to go ahead and get

out of the customizer right here now this
is going to be one of those things that they

are going to simplify right now the way you
do it is with this option hereunder appearance

and then Astra and there’s this option here
this is advance headers some people have felt

that this is a little complicated so what
I think they’re going to do in the future

is there to make an easy option to enable
it in the customizer and and just put all

the options in there and make it really easy
what you’re used to and then they might change

this name from advanced headers to maybe page
headers or something like that I think those

are some of the ideas bouncing around so this
is where your and I want to check out the

video description and I’ll put a link to a
new dedicated updated video if that change

has occurred okay so it’s now transparent
header time and I got any honest with you

transparent headers for websites WordPress
websites can be a little complicated in the

way that most themes implemented is very problematic
okay so the reason is is because there’s different

that I’ll just have to show you actually it’s
kind of hard to explain but I will try to

show you so let me give you a couple examples
so right here is on the Astros website you

can see on the blog we don’t have a transparent
header we just have this purple header but

then right here on the very same website you
have this transparent header where you can

see this as a background gradient it actually
I think it’s an image on the background like

that in all sort of blends in together now
let me show you the difference between these

two pages this page here was built with the
page builder so it’s very appropriate Ted

to do this transparent header because essentially
everything is built in the page builder and

then when the site goes live the background
for the top part of this page builder just

lifts up and this beautiful header gets laid
on top of that you have total control over

the spacing and everything but when you go
here you don’t have this happening why because

this page right here was not built with the
page builder this is just a native blog post

so you don’t have the page builder aspect
so on this part of the website on a blog post

you don’t want to have a transparent header
so does that kinda make sense because you’re

not using a page builder so if you did a transparent
header it would just be over this kind of

a grayish background and it would not look
good so with WordPress when themes make it

global it can be a little problematic and
I know this might be a hard concept to understand

and there’s also this weirdness with archive
pages so if I click right here where it says

news this is called an archive page in this
as well these are obscure pages on your WordPress-based

website that people don’t even think about
where you’re not doing this with the page

builder as well which is something automatically
generated by your theme so you have all these

different variables and that’s why transparent
headers can be a little tricky and hard to

understand at times so here I am back on that
website number to give you some advice of

what I recommend so the way working to create
this we go to appearance we go to Astra we

have this option right here says advanced
headers and I’ve already created to transparency

header with no title and then transparency
header with title now you can create as many

of these advanced headers as you want and
you can even specifically apply them with

rules so you don’t see anything here here
because I haven’t applied it anywhere with

a rule so one of the things I’m going to need
to do is this right here is I haven’t assigned

a homepage to let me go and assign a page
to the homepage really quick so the women

to do that I want to go to settings to go
to reading and then for the I’m in a change

this for to show your latest post to instead
choose a static page and on the front page

I’ll show this blog page okay that I’ve created
let me save it and then go here and now do

a refresh of the page so now were seeing the
blog page right here it’s a specific page

set to be the homepage of this website so
this is important now let me go back to where

I was Astra and then a minute go into advanced
headers and let’s go ahead and take a look

at each one of these first let’s take a look
at the transparent header with no title and

let’s look at the settings so you have these
three tab options right here so the first

one is if it’s going to include in the page
header with the site header and what this

means is underneath the actual header it will
show like for here to show the page title

or post title and then underneath that the
breadcrumbs and here’s the same thing but

it will show the title on the left and the
breadcrumbs on the rights you can see with

this advanced header I have it set to the
third option which is no page header okay

and then I my click right here for site header
and this is what you need to fill out so I

enabled transparent header so when it’s not
enabled this is what it looks like and then

you check this box you need to put in your
logo again and your logo might you want might

want to be different is so if it’s a darker
background you might want a lighter logo so

that it it just fits right so you’ll do that
and will choose the logo with you saw me earlier

in the video I set it to 180 that’s the width
of the logo we set that again and then we

have these other options right here so if
I want there to be a slight color we can go

ahead and enable that here’s what that looks
like so actually they didn’t enable a slight

color but they do have the slight little border
right here actually where was it there was

this is actually something else I wanted to
show you let me go back right here here some

examples of what the page header with the
page header looks like the two options and

you can see there’s a slight tent in this
that is that setting right here where it says

background overlay color so if you want one
you could do it if you don’t you don’t need

to and you can still be transparent or see-through
and then we have this border bottom the size

and that’s what we see implemented right here
this is like the one pixel border and you

can see it’s a very light color if you wanted
to set that you can increase this to one or

two probably one and then you can choose the
color and we have some different options we

can apply to the primary menu so you can put
a background color on the menu I don’t usually

like websites that do that but you’ll deftly
want to change the link and the link active

for the menu I sent those both the white and
I chose my menu to be the main menu so this

is how I have it set up here are the display
rules now you can use these display rules

and just when you you click on this box you
can apply to the entire website you can apply

it to specific pages and and special pages
and specific posts and whatever you want you

could do it that way and right here you can
choose to show to people that are logged in

and logged out or certain role so here is
what I find the problem if I was to go ahead

and choose entire website just like this and
then click on update it’s going to apply to

this page because I chose entire website but
is not gonna look good because it just can

essentially get rid of this and it’s going
to have this other color for the background

so when I do a refresh and it also lifts it
up by the way because like I said I’m not

using a PG builder to build this blog page
this is what it looks like you can see you

know this Dustin really look good at all and
so this is a problem so let me remove it and

not display it there on that page of me click
on update now let me show you the other page

transparent header that I set up so let me
go back to all advanced headers so someone

with no title and here is one with the title
so the settings on this one are going to be

identical in this column here they’re going
to be exactly identical but for here I chose

this page header option to go along with it
and I didn’t activate breadcrumbs it’s fine

I chose the text color of White’s eye for
the background I didn’t play around with these

options here but you can adjust the size I’ll
show you what it looks like in a minute here’s

a fixed background color I chose an image
and what this is while you’re to see here

in a moment’s and I can put overlay color
over that it’s pretty dark I don’t need it

and I guess I could even make a parallax I
didn’t even realize that let me just do that

just because okay Melanie go to display rules
now let me go ahead and make this the entire

website and click on updates okay now that
that’s updated so you can see this is what

it looked like the other transparent header
and now when I do a refresh we can see this

is that and I should probably crop the image
we don’t see the #fist bumping of it but that’s

okay so you can see now I have this kind of
a transparent header but it’s but with this

background image and I’ve got that title going
on right there but see if I have a different

homepage or services page or a contact page
that I’m using a page builder to to build

I might not want this I might want it to be
no page title and I might want to totally

do something entirely different but if I have
this sent to the entire website there really

is no way to overwrite it so let me remove
this and show you what I think my best advice

to you would be so you kid create an advanced
header and apply it to specific items or this

is what I think I want to do when we go ahead
and do a refreshing LC goes back to normal

so what I would recommend is this one of two
options one you could target your pages better

or post better with the display rules so instead
of doing the entire website you could do something

like all posts and you could advocate let’s
hear we can add another rule and we can maybe

do all pages like this and we can do it this
way and so this will target all pages in all

posts but not those kind of category pages
those ones that are like the archive pages

that are set up by WordPress you can have
those be different but you actually probably

wouldn’t want all pages because on the pages
you might want the other one because you’re

going to know there can it be done with the
page builder so you can do it this way and

this is this is not bad let me get rid of
that and go here here’s the other way and

II, like this to give you a little bit more
control so let me go to a post here’s your

default hello world post and if I go to edit
this post there’s some theme options here

off to the right you can see it’s as Astra
settings and one of them is advanced header

and I can choose which of those headers I
created so if I wanted to do the we arty know

if I choose transparent header no title it’s
not to look right see if I go there I click

updates and then I take a look at it it’s
just not to look right it’s going to get rid

of the background and pull it up see that’s
not what we want but I can go here and instead

choose the other option with title transparent
header with title click on update and I can

do this on a page by page or post by post
basis just like this let me try to give you

a an example of this with a page with the
page builder so I’m in a go back here and

I do have a page set up that I was playing
with called transparent header let’s actually

see what this looks like right here so we
don’t actually have anything assigned to itself

I go ahead and click on transparent header
right here it looks like I already clicked

on the edit with Elementor you can see I don’t
have anything set for it so let me go ahead

and show you what happens if I have advanced
header set to let CL go transparent with title

just like that click on update and now I’m
going to jump into Elementor and it’s gonna

be the same thing in Beaver Builder so let
me jump in there and show you what that top

portions gonna look like you see I don’t have
control over this area anymore be to have

the image behind it that I want and to have
whatever text behind it that I want to so

if I was to say apply a page template let
me just go here click on add a template it’s

going to show me all of the Elementor templates
let me just go ahead and say grab this coffee

shop one I’ll go ahead and insert this really
quick and this’ll help demonstrate the what

I’m trying to explain better so here we go
if I hide this I’m stuck with this transparent

header and then this beautifully designed
website I got this ugly transparent header

here don’t want that someone to go ahead and
click on save to save the that the page there

and then I’m to get out of here let me go
back to the dashboard okay so when I do a

refresh on the front-end this is what it looks
like not what were after but if I go here

and I change it from the transparent header
with the title to a transparent header with

no title watch what happens when I click on
updates and then, to go to the front and do

a quick refresh and this is how we wanted
it to look so now everything was kind of pulled

up and the header is just right there transparent
on what I created with the page builder just

a quick word of caution hereto you need to
have spacing here to accommodate for the header

because it just literally lifts everything
up so I click on edit with Elementor let me

show you how this works and this is one of
the beautiful things about Astra Theme is

it’s made for any page builder it lets you
access this entire area and only when you’re

viewing it on the front end or you go to preview
it do you get to see what happens other themes

that weren’t made to work with every page
builder this header is just laid on top of

it and what happens is you can’t get to the
settings right here and that’s what happens

with every other theme that wasn’t quite made
for page builder you want to make sure there’s

some spacing in here to accommodate for that
so but anyways I think you get the point why

you have to consider with the transparent
header these various differences and I know

it can be a little complicated if you’re you’re
new to building websites but it’s very imperative

to understand this whole concept of what’s
happening when you make a transparent header

and how you have to be cautious on how you
you apply it to your site so anyways this

is transparent headers I hope I did it some
justice and you can play around with some

of the settings I know I didn’t do that well
so this was the transparent header with no

title so let me just hoops let me just show
you some of the options of what you could

do there so here’s our no title I right there
I’m in a go here and so for that background

color we can maybe make it white and then
make it very see-through but just kind of

barely there may be something like that I
actually have no idea how that’s gonna look

but let’s see real quick I go here do a refresh
and see their ego got a little bit of it in

there but it’s still transparent okay and
then we could get rid of that here clear this

out and for the border bottom thing we can
give that one there and we can choose another

color and will want that to be like really
light as well that’s probably a little too

pronounced let’s go something like that just
to give some separation so if I go here and

do a refresh that’s going to go away and we
should see the very light color there I’d

even make it even more transparent for that
separation so this is transparent headers

and there’s actually one thing that I didn’t
cover if you go right here on my homepage

I’m using Astro there’s this menu and above
header area right here and there’s also an

option for a below header area and you can
put a menu in there you could put text in

there you can put all kinds of different things
in there these are options that you would

find inside the customizer so if I went into
the customizer right here and I went into

layout work and I have that option available
right here is layouts here’s my above header

so if I wanted to turn it on I could do this
actually this would probably make more sense

here and I have the two sections I can choose
what I want in each section with our want

to menu search option some text or a widget
we have that option there as well alright

so we only have one thing left to do and that
is for me to show you how to put Elementor’s

a menu and replace this menu with it it’s
actually quick and easy so let me go ahead

and go into Elementor to go to Elementor him
to go into my library I’m in a go ahead and

click add new and let’s just call this menu
navigation I’m doing this off of memory I

did this when the Elementor menu widget came
out, click on edit with Elementor essentially

I’m just gonna drag and drop in the navigation
option there so I write I want to go to the

Nava option where are you it is right here
want to drag that in a minute click on it

I’m in a choose Maine I will let see maybe
I will write a line it’s and I’m not to get

to customizing it I have a video on it there’s
tons of videos on customizing this menu so

then you want to hover right here off to the
right of the widgets there’s a little save

icon let’s click on it let’s save this and
name it menu I’ll go ahead and click on save

I think that did it FIA memory serves me best
let’s see if that is available in the the

my library hear someone go to back to my dashboard
and let’s see what options we have let me

go back to the Elementor my library like here
now and have Elementor Pro it provides this

short code here there is menu that’s exactly
what I wanted to let me go here and copy this

short code and the woman to take that sure
Cody Morgan to put it in that widget area

that we get on our theme okay there we go
come on it’s pulling up to go to lay out a

minute go to header first thing I need to
disable the menu just like that and then for

the custom menu item I is in my testing I
put in the widget but you know what I wonder

if it will work here if this will accept shortcodes
working to find out right now I just pasted

that in and that doesn’t look like it’s surrendering
properly so let’s go ahead and remove that

and let’s who can go ahead and put our our
widget back in their just like that okay that’s

fine so we needed to disable that that menu
we had so let’s go down here two widgets I

need to go back one go to widgets it’s the
header widget and it’s for the text, to go

ahead and go here I’m going to replace it
with that short code just like that and go

here let’s do is save and publish and this
should work on the front and let me go ahead

and click on the homepage right here actually
I remember what I did wrong we have to remove

this widget right here and click on remove,
click on add widget right here and then I

have this option here for Elementor library
and this was it I can choose that menu widget

right here that I created and now it should
actually appear that there it is finally got

that working so there you have it if you have
Elementor Pro obviously you need Elementor

Pro to even have the menu option all you need
to do is put the Elementor library widget

and then selects the widget that we saved
let me see if the other works just as fine

this would be the entire column I don’t know
at kind of stretches it a little so this would

actually give you just the widget the global
widget that I created real quick and there’s

tons of beautiful menu styles that are available
and you get full responsive control so it’s

a very very impressive so we’ve covered a
lot in this video we talked about logos and

menus and mobile responsiveness and we’ve
talked about standard headers sticky headers

transparent headers and all the pitfalls with
that menus VOD short code in the header widget

the Elementor one that we just did and in
the beginning we talked about fully creating

your own header with Elementor or Beaver Builder
actually wanted to have one last little piece

of information what I would think would be
cool if you did use the header footer plug-ins

for Beaver Builder Elementor and you just
created the top portion of the header and

then instead of having a menu you do like
a logo some kind of three calls to action

up here may be your business hours your business
phone number and maybe a bit of a sale that

you might be having you come to see this way
out a lot with e-commerce stores with a pack

a lot of info and then what I would do is
for the layout I would go to this below header

option I would enable it right here and then
I would put a menu below the header like that

obviously you can choose the colors whatever
colors she wanted we’d actually have to assign

a menu to that area this way you can design
a beautiful header up here with calls to action

in it whatever business information and then
you could still have your menu here obviously

you’d have to customize the colors and everything
using the options that Astra gives you so

we covered all in this video there is going
to be links in the video description for updates

and also to take you to specific parts of
this video so you don’t have to started from

the beginning every single time and like us
unless video if you don’t have Astra Pro go

ahead and click on my link will take you over
to a bonus page that I have for it here on

my website and if you see anyone asking any
questions about any of these header styles

if you would go ahead and referred them to
this video and make sure you let them know

they can open up the video description box
for links to specific parts in the video so

I’m enjoying making these videos for you and
the link to the entire playlist will be in

the video description box thank you for watching
the video give it a thumbs up ask me any questions

in the comment area I’ll be happy to get in
touch with you thanks for watching

Adam @ WPCrafter

Adam @ WPCrafter

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

8 thoughts on “How To Setup Headers With Astra Theme – Normal, Transparent, Sticky, & More”

  1. S

    Hi Adam,

    I want to make my header transparent for the homepage only, as it’s a splash page. Perhaps using the Elementor Canvas and building a header on the homepage only would be the route to go? If Astra uses styles only rather than template changes to apply the transparent header, I could apply the same styles to the homepage only. What do you suggest?

  2. Adam,

    From my understanding when using ELPro and replace the theme’s header you lose the ‘page markup?’? I think I’m using the correct term.

    Is this correct and if so, do you know if when using Astra and the https://wordpress.org/plugins/header-footer-elementor/ plugin with the free version of EL…do you know if it replaces the ‘whole’ header or does is leave the “page markup” in tact?

    If you could give a little clarity to this it would be very much appreciated.
    Thank you

    note* I watched this video some time ago and I’d look through it again although I’m on mobile data at the moment.
    Thank you again.
    Doug

  3. r
    rico van Huizen

    Dear Adam,

    Once I have applied the the sticky header option in Astra Pro, it was not applying the effect als it is the case with the scroll to top function. Do you have any idea, where this problem comes from?

    1. That’s very odd because both of these features work fine for me. You can try reaching out to their support, but it’s most likely some conflict with a plugin on your website.

Leave a Comment

Your email address will not be published. Required fields are marked *