Styling Your Fixed Vertical Header

Difficulty Rating :
Written byAires DaGraca

Welcome Back,

In our previous post you create your very own Fixed Vertical Header so congratulations on accomplishing that task now its time to add some widgets to wow your visitors.

Let’s Begin

Now that you have your fixed header we need to add things like logo, navigation and maybe even a copyright. But where do we begin sure you can open up the template and start dragging in widgets to your hearts content but for this tutorial we will be utilizing Elementor Pro template system and build things in parts or sections.

For example Vertical top and Vertical bottom templates to help stay organize and do some things we maybe couldn’t do other wise.

The Templates

We are going to build 2 templates that will live inside our fixed vertical header.

The first template which we will build is called Vertical Top and it will hold our logo and menu. The second template will be called Vertical bottom and it will be used as a kind of a footer for our vertical header.

Vertical Top Template

Navigate to Templates > Add New to create a new template section and give it the name of vertical top.

Next we need to drag some widgets onto the page. Make sure that all your widgets are in the same column so your outcome will be same as mine.

First we need to take care of the logo you can either use the logo widget or image widget either will work.

Next we need to add a spacer widget followed by the Nav widget. You should have something similar like the image below.

If you are using the image widget to house your logo be sure to use (px) because if you know your vertical header is 250px wide you can use that to decide how big you want your logo to be.

Style your menu anyway you see fit.

Vertical Bottom Template

For our vertical bottom template I am just going to include some social share options for the visitors who want to find me on social media.

Create another section template and give it the name of Vertical Bottom.

For this template all we will need is the Social icons widget. Drag it onto the page and style it how ever it fits your design.

I didn’t get crazy with the styling.

Now that we have our templates built we need to revisit our fixed vertical header template.

Putting it all together.

Open up your vertical header template by going to Templates > Theme Builder and selecting your vertical header template.

Next we need to drag 2 template widgets into the column within the vertical header.

Choose Vertical Top for the Widget on top and Vertical Bottom for the widget on bottom. You should have something like the image to the right.

Now we need to add some place between the to template widgets. If you remember in the previous tutorial we made the column fill the space of the vertical header I am sure it didn’t make since then but it will in a few.

Open the column options for the column inside the vertical header and apply this single option that will evenly proportion those 2 widgets no matter the size of the screen.

After selecting this option you should see the widgets spread even from one another and should look like image (b)

Image A

Image B

This method works great for 3 templates also you could have your logo at the top menu in the middle and copyright at the bottom for a very clean looking vertical header.

Here are some examples in some of the work I have done with vertical headers.

Example 1

Example 2

Let me know if you found this useful in the comments because I enjoyed writing it and sharing what I know 😀.

Was this article helpful?

Awesome, follow us on Twitter or Like us on Facebook

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

2 Comments

  • How do you drag and drop custom templates? Vertical top and bottom? I don’t see where I can drag them. I can insert them into the layout but they don’t end up on the left sidebar. I’m making quite a mess here. Your help would be most appreciated.

    Reply
    • Afternoon Chris,
      There is a template widget that can be used to pull your templates on the page.
      Hope this helps

      Reply

Leave a Comment

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

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.

Hello, would you like to take a survey before you leave.

Your answers will help us provide more and useful content.
Thank you for your time.