How to add another row to header layout?

Support
#1

Hi, please see how I am trying to add a new bar to the layout, but how it does not inherit the background found in bar 2, though the menu bar 1 does.

How can I add a background that will be behind all bars so that I can add a lower row to my header with more content?

Thanks. Please see screencast in secure note showing my issue.

#2

Hi there,

You added the background image to Bar 2. The Bar 1 is set to be absolute that is why it goes over the Bar 2. That is why the Bar 3 with the same background cannot be achieved unless you want to have that also as an absolute one.

I suggest that you enable the Wrap Children option in the Bar 2 and add a container to the Bar 2, then in the container kindly set the Max width to be 100% and Self-Flex like this:

That will wrap the 3rd container as a new row for you. You will not have the container inside container option anymore and you need to achieve the 3rd row design only using the flex properties of the elements themselves.

Thank you.

#3

Hi I tried this but it only created a third column beside my other containers, it did not break to a new row.

Please see screencast in secure note. You have my login credentials above in secure note if you need to look in my header.

Thank you!

#4

Hello There,

I have logged and inserted a custom headline so that we can visualized the final out. It turns out that you haven’t added any in your header. Please add more elements to it and see the final result.

Please let us know how it goes.

#5

Hi thanks Rue. Unfortunately this doesn’t work on bigger screens or when zooming out—the container still appears to the right of the other two. So I think something isn’t set up quite right.

See screen shot in secure note. :slight_smile:

Thanks for your help.

#6

Hello There,

I can confirm that the issue is happening. Well in that case, we will be using a custom Self Flex. We need to make 50% for the two containers and use 100% Self Flex for the 3rd container.

Please check the header now and see how it goes in your very large screen.

#7

Thanks that does seem to keep it below!

However, it is not contained within the bar, or at least it does not share the same background image. I would like the lower section to fit within the same background.

Can you advise on this? Thanks!

#8

Hi there,

I added a test header and test page for you.

The problem was the Bar 100VH height. I changed that to auto and also added few lines to the headline to show it stretches the background.

Thank you.

#9

Hi I don’t see anything at this link… Can you show me again please? Which header did you do this to? If you name it I can check it in the editor?

Thanks :slight_smile:

#10

Hello There,

Please edit the bar and change its dimension. The bar height should be set to “auto” just as shown here: http://prntscr.com/hk5ebg

And please do not forget remove the background color for your 3rd container and make sure to add some padding so that it will have some spaces around.

Hope this helps.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.