Header Setup

Support
#1

Hi,

I am moving this site: http://faithisland.org from an old theme to Pro theme.

Here is my staging site: http://faithisland.staging.wpengine.com.

I am trying to replicate the header, but I am having some issues.

I can’t get the third bar (which contains the menu) to center and go below the second bar (which contains the logo).

Thanks,

Jordan

#2

Hi There,

Thanks for writing in!
Please make the bar relative instead of absolute and make it transparent.
and the content width to the width that you want the bar, so that the content will stay in center.
Make the container BG to white.

Hope this helps. If this is not clear please send your login details so that we can make it for you.

Thanks

#3

Hi,

That does make sense but it didn’t work for the third bar.

Possibly because of the second bar needing to be in an absolute position.

I will attach login info if you want to look at it.

Thanks,

Jordan

#4

Hi Jordan,

Why do you need to make the second bar absolute? See what I did to the Copy of FWC Main Header I make the second bar relative and let the 3 bars normally stacking. Then I duplicate the 3rd bar and make it the sticky bar.

Hope that helps,
Cheers!

#5

Hi Friech,

I am trying to make the second bar be semi-transparent so you can see the green leaf image in the background. If you look at the original at http://faithisland.org, you can see that it is semi-transparent.

The only reason I made the second bar absolute is because that is the only way I can figure out to make that happen. But then it messes up the third bar.

Does that make sense?

Thanks,

Jordan

#6

Hi Jordan,

They look pretty similar. the only difference your bar is not fullwidth on scrolling? Is that what you are looking to fix?

Thanks

#7

Hi Joao,

Here are some images to show what I mean.

Original (not Pro theme): https://cl.ly/283A2S2u1N2s

Working on (Pro Theme): https://cl.ly/3v0F0y1U1z3L

I want the second bar to be transparent so the image shows behind it.

Thanks,

Jordan

#8

Hi Jordan,

To achieve that you need to set Bar 2 and Bar 3 to absolute.

Then add margin top to your bar 3 to prevent overlap

Hope that helps.

#9

Hi Paul,

That did it. Thanks for the help!

Jordan

#10

You’re welcome!
We’re glad we were able to help you out.

#11

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