Pro Header and Footer Customizations

Support
#1

Hello,

I wanted to update this thread but the option to respond has already expired: https://theme.co/apex/forum/t/pro-footer-assistance/22780. The website under development is: http://wordpress-85748-411361.cloudwaysapps.com

  1. I followed the instructions given in the previous thread regarding styling my logo to look and operate like this: http://yfcirc.com/. Unfortunately the logo image is invisible. Please advise?

  2. This is the look I am trying to achieve in the footer but have not been able to as of yet: https://prnt.sc/ihfk6i. Can you assist?

Thank you,
J

#2

Hi There,

Thank you for writing in, your logo is there but it has no height and width, would you mind replacing that with a different image just for a test if the issue is in your image.

You almost got the footer, you just need to get the YFC National, YFC International closer to the social icons, to do that please change the max-width: 50%; to none on the first container where your social icons are placed, then just set a small amount of right-margin on that container.

Cheers!

#3

Thank you for your response.

  1. Regarding the header logo, I got the image to display by removing the class logo-adaptation, the code for which is:
    {
    position:absolute;
    z-index:99999;
    }

The issue is that I am trying to create a special effect there to match http://yfcirc.com/.

  1. Regarding the footer, your solution did not quite work. I applied your settings, but there was still a lot of space between the social icons and the two links. I set the horizontal flex layout of the bottom bar to “start,” and that fixes the issue but creates another… Now the final container containing copyright links is not aligned to the “end” as it should be. :frowning:
#4

Hi There,

Please provide us login credentials in a secure note so we can take a closer look.

Cheers!

#5

Sure thing. Please see secure note below:

#6

Hi There,

You need to have two bars.

First won’t be sticky, second will be sticky but will be hidden initially. I have set this for you already.

Now my suggestion would be to replace the logo with a logo image that emulates the first logo on your reference website and adjust the other parameters according to your wishes.

Hope it helps

#7

Hello,

Thank you for your taking the time to look at my site, and for your response.

I was able to more or less set up the header of http://wordpress-85748-411361.cloudwaysapps.com the way that it needs to look (http://yfcirc.com/). Only the home page needs to have the effect created, so I duplicated the header to make a different, more simple global header that will render better across devices. For reasons I cannot seem to figure out, the front page header now seems to work on every device but mobile. Meanwhile, the other global header is not displaying anything other than a white background on every other page, even though there is content to be displayed.

Could you please advise? WP credentials are in a secure note above if needed.

Furthermore, I think you missed my comment previously regarding the footer issue; your solution did not quite work. I applied your settings, but there was still a lot of space between the social icons and the two links. I set the horizontal flex layout of the bottom bar to “start,” and that fixes the issue but creates another… Now the final container containing copyright links is not aligned to the “end” as it should be. :frowning:

#8

Hi,

  1. Your header was set to be hidden. I went ahead and make it visible.

  2. To fix this set your bar Horizontal flex layout to Space Between. Then move your two links` element to the same container as your social icons. Your bar should only have two containers.

Hope that helps.

#9

Thank you for your response. Unfortunately a couple of the issues I brought up above remain:

  1. Header not rendering on mobile.
  2. Header not sticky on iPad and mobile.
  3. Logo image not linknig properly.

My WP credentials are listed earlier in this thread if they are needed.

Please advise,
J

#10

Hello There,

Thanks for writing in!

1.) It is not rendering on mobile because all of your bars were hidden in smaller screens. Please edit your header and click the bar. In the Bar > Curtomize, please disable the “Hide During Breakpoints” option.

2.) The header should be sticky on the tablet and smaller screen. This is what I am seeing:

Please clear your tablet/mobile browser cache or use private browsing mode and test it again.

3.) The logo image is not linking properly because you haven’t added the correct url. It should contain http:// or https://

Hope this helps.

#11

Hello,

  1. I double-checked, and do not believe you are correct - there is definitely a (third) bar which is set to be visible on small screens. The first two bars are hidden, but the third is not… in fact, it is set to be invisible on all screens except the tiniest. So why is it not rendering on mobile?

  2. Header is sticky on iPad, not on mobile.

  3. Your solution on this one worked. :slight_smile:

Thank you,
J

#12

Hi,

For 1 & 2

I went ahead and fix this by turning on Sticky Header and unchecking Hide Initially of your third bar.

Kindly check in your end.

Thanks

#13

Every time I think I am beginning to master the Pro Header builder, I discover new features! I have never noticed that feature after expanding the Sticky Header. Works pefectly- thank you for ryour patience with me!

J

#14

Glad to hear it, cheers!

#15

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