Hero Image with Left Header Position

Hey guys,

On my new website I want the simplistic header to the left, which has been done with Pro, but for the actual content section I would like a large hero image to be along side it. Just like the “Hero” header template in Pro, only with a left hand menu.

How do I go about doing this?

Thanks!
Jon

Hey Jon,

Sorry but I’m currently not sure what you’d like to accomplish. Would you mind providing more details, screenshots and the URL of your site so we could see the current setup?

Thanks.

Hi Christian,

I think I have the same problem as Jon.

What I want to do is this:

  • I’m using the Hero template for my header.
  • As you know the Hero template has 2 ‘Top’ bars.
  • But the it looks like just 1 bar (for one: I would like to know you guys did this??)
  • I now added 1 ‘Left’ bar but it pushes the 2 ‘Top’ bars to the right.
  • What I want is that the background image of 1 of the ‘Top’ bars floats through the ‘Left’ bar so it looks as 1 nice element.

Thanks in advance.

Please see attached image.

Hello There,

Thanks for updating in! Do you guys want something like this?

In the second bar container, I added another container right before first container which has the header and slogan text. The bar container serves as the row and the containers serves as the columns. Please check out how I laid out the containers here: http://prntscr.com/fyqjtq

Hope this helps.

Thanks for your reply.

3 questions. I’d really like if you can anser them separately.

  1. I still don’t understand how the ‘Top header’ background image ‘floats’ (or how you wanna call it) through the ‘Left’ header. As you can see in my image the ‘Left’ header pushes the ‘Top’ header to right and that’s precisly what I don’t want.

  2. In your image I see that the background of the ‘Left’ header is black. My goal is that also that background should be the same as the rest; or in other words, the background of the ‘Left’ header that should be the same background used in the ‘Top’ header. How can I do this?

  3. What I also do not understand; in your image I see that you selected the 2nd bar in the ‘Top’ header and the 1st container of the ‘Top’ Header as they have that blue line around them. In my surprise I see in your image that the container, what looks like to be the ‘Left’ header, is selected (has that blue line around it). How can you select a bar in the ‘Top’ header with the result that a container in the ‘Left’ Header is selected???

Thanks for your help.

Hi there,

As mentioned above, it’s added to the container of the same top header and not to left header. Please check this video recording.

https://www.dropbox.com/s/dv8amp8vu5dt8qj/bandicam%202017-07-24%2007-50-44-537.mp4?dl=0

Please download the video to view it properly.

Thanks!

Hi,

Really cool that there are so many options for creating your ideal header look. The thing, it really costs a lot of time for me to find really small things I want to create.

  1. for example; I don’t know how to move the vertical menu to the left… I’m clicking around the header options now already for like 30 minutes… and still haven’t find the solution… It cost me too much time to create the header look i want to be honest…

The thing I’d like to create is something like the image below:

Hi @djinnie,

We can move the container inside the bar to position it’s content. Just note that the container is depends on the bar width and maximum width settings. If you are still confuse, I do recommend for you to install the footer Column templates. It will give you insights on how columns settings works. You may also check our KB here: https://theme.co/apex/forum/c/themeco/kb for more videos regarding the builder. If this still doesn’t help, please open a new ticket and then share your admin credentials and site URL there using a secure note so we can check your setup further. It is not recommended to add credentials here because it is visible to the owner of this thread.