How To Make A Sticky Header Or Other Element In WordPress

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

Video Transcript

How To Make A Sticky Header Or Other Element In WordPress

Welcome back for another video I’m Adam from WPCrafter.com
were I make videos for nontechies like me

and like you and in this video i’m going to show you how
to do some really cool stuff using Beaver

Builder and I built this the other day and
I thought wow I’m to make a video to show

this to be because I think it is just so cool
so sometimes you have a webpage that has just

a lot of content right there’s just this is
a long page of content and you might be tempted

to break it up into different pages but what
I notice is longer content seems to rank a little

better in Google and why not have it on one
page so I made this very large page right

here you can see there’s different rose and
different sections and what I built was this

navigation here I call it a sub nav in it
sticks to the browser window when you scroll

down to see when I start scrolling it just
sticks there and what I really like about

it is I put in this call to action here on
the right there’s two different options to

get started her to contact and it’s just very
nice way told to to remind people of what

they’re going to do next and making it real
convenient for them to go around your page

so for instance if I want to skip through
to the philosophy section I can just click

on it in a just the scrolls you right there
or the vision right there mission etc. so

I’m going to go ahead and show you how I did
this in this video now to get anything to

stick there’s this really cool plug-in I added
that allows you do real easy so what you want

do is go in and install this plug-in and it’s
right here under plug-ins now I’ve already

installed the plug-in and it’s right here
it’s got the craziest name sticky menu or

anything!

On scroll crazy name and you probably got
into the search exactly for that so few go

to add new and you go like that and hit enter
you just hit sticky menu you would see it

there it is right there if I just tend to
okay there it is so just do a search for sticky

menu and then you could go ahead and install
it in when you install it let’s go into the

settings for it to go to settings and you’ll
have a new option there that’s a sticky menu

now this is the only setting I put in we need
to put a was called the class now you have

to be super technical all you need to know
is that when we put the class here were going

to put it also on what we want to stick okay
so it could be very complicated explaining

all this technical mumbo-jumbo but all you
need to know is where to put a class year

insults can be what I did is I put.

Sub navigate needs a start with the.

And what you just use the same thing put a
period in types of nab or sticky or whatever

you wanted and then go ahead and click on
save his settings so now I want to show you

how I built this case on a go ahead and enter
the page builder for Beaver Builder now before

I do that you’ll notice that there are some
real flashing is going on where I hover over

the menu and we get this nice animation we
get the color changing and then this area

here is just beautiful how it’s the dual button
and I have say or write in the middle show

you first how I’m getting these elements in
your now I chose to use a tool to do that

you can you don’t need to use this tool but
I used it because I like a little bit of flair

on my website like this and I like just the
designs and I want it as easy as possible

others a new plug-in there was just released
and is called ultimate add-ons for Beaver

Builder all have a link on it down below and
I thought this it just came out it allows

you to have a whole bunch of new modules into
Beaver Builder any work on the free version

or the paid version and also has these pre-designed
to sections so you can just I want to contact

section just drag-and-drop it in and they’re
also going to be releasing full-page templates

at some point in the future here and so right
here is all while actually to show you a list

of the modules here’s a list of all the new
modules it adds right here and though you

can see here some of the different page Road
templates right here in page templates that

are coming out soon but I just use the module
so what I used is this thing called a creative

menu and there’s 18 different styles and ice
just happen use style 18 right here someone

to show you how I did that and then for the
button I also used it from the ultimate add-ons

and it’s called a dual button which I kinda
like little things like that so let me show

you how I did that so on the page and click
on page builder and this is gonna put me into

the Beaver Builder page builder now you see
some new options there because I’m using this

plug-in like as it you don’t have to use this
plug-in and this sticky element thing will

work on the free version of the paid version
of Beaver Builder this video is for every

body also ultimate add-ons as the sections
button right here in and also adds this ultimate

add-ons right here when you click on it you
get all these add-ons you click on sections

they’re all broken up and organize security
just drag-and-drop your section in so anyways

this isn’t about that plug-in though so all
it is I created a new row and let me show

you what I did to that row, and click on row
settings an advanced enema scroll down and

that’s where I put that class that I added
to this sticky plug-in sub now so right here

you’re not to put the.

But if you did I’m sure gets stripped out
and that’s what is going to tell that plug-in

that this row is what needs the stick nice
really as simple as that now I’ll show you

something else a lot of people don’t know
how to make on page navigation links that’s

where you click on the linkages scrolls you
down on the page what people don’t know how

to do that phenomena show you in this you
are right now so here is a section that his

ties to words is who we are so many click
on its so what I’m doing is when someone clicks

on who we are I wanted to go straight to this
our staff section of the page summary click

on it, go to advanced and ominous scroll down
what you do is you just assign it an ID so

I signed it who we are all with-some case
on the click on cancel so I signed a 90 and

then on your menu item which is right here
you put your link in which is the page you’re

on the hash sign and then that IDU created
so here is the menu item and click on edit

and you can see for the link I put hashtag
or pound in that ID that I put in and that

tells this link to scroll down the page to
where that ID is and I did that for each of

these items so if you look on mission right
here if I click on it you’ll see I created

the ID for it our mission right here our mission
and that corresponds with this link right

here for our mission so you can manually drop
a row and make it full with put a collar and

then just manually create these hyperlinks
to create your menu if you don’t want these

fancy styles that you get with ultimate add-ons
and the same thing with here you can just

drag a text box there and puts a button in
and that’s it if you don’t want this fancy

style of a button right here and that’s pretty
much all there was to creating this elegant

way of navigating of long page with different
sections on it and to also have this call

to action in the top right corner so that’s
pretty much it now I’m sure we can make anything

stick and I had this idea what if we didn’t
want a menu we just wanted was on scrolls

that call to action to be on the top right
so I’m doing this off-the-cuff woman to go

ahead and delete my menu like that now my
menu is gone and I just have that and let

me remove this color on the background some
of the going to the row settings and the background

is said to color me to make it non-like that’s
in minimum to save its and let’s see so now

what happens when I scroll that should just
be the only thing that sticks so let’s go

ahead and click on Don and published changes
I’m doing this off-the-cuff I just thought

it might be fun and are there is now I don’t
have my navigation I just wanted to create

a sticky kind of this right here and there
is in there it sticks that that would actually

be really cool for any business you can have
maybe a call us and then a phone number or

request an appointment or something and then
you could just make that hover and float right

there like that isn’t that cool actually like
that a lot of people use it on some projects

of anyways I don’t want to make this video
longer than it needs to be if you want to

look at ultimate add-ons I have a link down
below to that and you can check out all the

modules for yourself eyes actually really
cool you can just click on any of these modules

to see what they do prisons right here I just
hovered on it is the dual button and you can

see there’s little button I used but they
have lots of other different ways of formatting

these and it’s a super flexible package but
like you said you don’t need the paid version

of Beaver Builder you don’t need ultimate
add-ons it’s just something to make it look

a little nicer than it would otherwise like
what can you do something for me if you’re

watching this on you too can you give me a
thumbs up and I want to invite you to subscribe

to this YouTube channel there’s a button right
beneath me and I really appreciate if you

did that and I’ve got something for you I
don’t want you to leave empty-handed if you

just click off here to the site is a free
video course that I put together just for

you Colby three steps to WordPress success
you will love this course registration is

free right now all you have to do is click
on the link right next to me thanks for spending

this time with me and I can’t wait to make
another video for you

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.

Leave a Comment

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