Key Elements

CSS, Elementor Pro, Vertical Header

Styling Your Fixed Vertical Header

Styling Your Fixed Vertical Header

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 😀.

9 Responses

  1. 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.

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

  2. Excellent approach here. I really found this useful for creating a vertical header for a website project I’m working on now.
    I wanted to keep the header active on the entire site, even if the client was using gutenberg editor. This tutorial helped me do that.

    I’ve combined this with the pop up builder to create a slide out menu action.

    1. I made the same thing. But not perfect for me. I want the menu (nav pop up) drop-down under the header. But it seem impossible with the pop up, the pop up is always at the 1st plan…

      Did you success to do this, or your pop up is on the 1st plan ?

    2. Hi Spikulu,
      I don’t understand what you are trying to convey to me.

    3. Hi,

      Sorry for my bad english.

      So, I tried to do the same things you can do with “elements pack pro” : a vertical header (like in your tutorial), with the nav-menu sliding below the header when you click a button. But it seem impossible with the pop up, the pop up is always above all the element of the website.

Leave a Reply