Copy mobile top bar from one site to use on another

Hey there,

So I’m working with the Header builder for only the second or third time, and I’m still unfamiliar with it, and with using templates/presets. I’ve got a top bar I like on Site A

and I’d like to have the same top bar on Site B

The header for Site B is fine on desktop, so I don’t want to change the whole thing, but I would love to get the links at the top of the desktop version to become like the buttons from Site A’s top bar when switched to mobile–without having to recreate the whole top bar from scratch.

I tried saving Site A’s mobile top bar as a preset, and exporting that to Site B but that didn’t seem to do anything. I tried doing the same thing with the container within the top bar’s bar (which seemed to contain the buttons in question) but that didn’t work either. What am I doing wrong?

So to reiterate/clarify, I want to have the mobile header for Site B look pretty much exactly like the one for Site B, with the buttons spanning the topbar, and then I just need to change the colors, links, and text for those buttons. But those buttons have a lot of settings altered already that make them responsive and fit right, so I’d really like to figure out how to copy the whole top bar over, and add that to the mobile header that currently is being shown on Site B.

Hopefully that’s not too confusing. I’ll post login credentials for both sites below. Thanks in advance!

Hello Randy,

Thanks for writing in!

Site A: I would suggest you to save entire header as template by hovering or clicking on the header.

After that from Template manager Pro > Templates select the template and Click on the download button.

Site B

In Site B, please navigate under Pro > Templates. Over here select the downloaded template from Site A by clicking on Choose a Template or drag it here to import link. Once template is imported it will show up on the canvas area.

After that Navigate under Pro > Header and click on use Template Link.

Click on Select Template link and select the template. In Name Template box, assign a name to header.

Once Header is created, please inspect the header and in that you can remove the elements that’s not required.

Thanks.

Very helpful answer, thank you! I was able to get the header fixed up 99% of the way I want it. The only thing that’s wrong is the top bar on a pretty specific browser width cuts off the left and right edges. I’m confused because in the Header Builder it shows it as the exact way I want it, but when I view the header in a browser outside of the Header Builder, and make the browser as narrow as I can on a desktop (trying to replicate 480 px), then it doesn’t appear the same as it does in the Header Builder. So, outside of the Header Builder it cuts off like this on the smallest browser width I can view.

Here is a link to view the header as it currently exists. https://21wfreedom.center/campaigns/

How can I fix this issue so that “Staff Picks” and the FB icon are not cut off?

Thanks!

Hey Randy,

The login credentials you’ve provided previously doesn’t work. Please check them.

Regarding the content being cut-off, it would really cut-off because they no longer fit the space. Maybe it looks ok in 480px but not smaller than that. The elements will not automatically reorganize themselves.

You’ll need to first make a decision on what you want the header to look on very small screen sizes. For example, based on your screenshot, you might want to divide the top bar into 2 bars or eliminate elements in that bar for smaller screen sizes. That can be achieved using the Hide During Breakpoints feature.

Thanks.

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