Overlap Blocks & Missing Top Navigation Bar

Site URL: https://www.walkertonphysio.ca/

I have added custom css to allow for image overlap and custom top navigation but am finding that it does not consistently work.

Within the footer, the logo is to overlap into section above, but it sometimes will get cut-off and the overlap code will not work properly.

In addition to this, sometimes when you scroll down on a page and then scroll back up, the top header navigation section will disappear and not be visible until you refresh the page.

Any suggestions on how these issues can be fixed?

On 9/10/2021 at 2:59 AM, BoulevardNorth said:

Site URL: https://www.walkertonphysio.ca/

I have added custom css to allow for image overlap and custom top navigation but am finding that it does not consistently work.

Within the footer, the logo is to overlap into section above, but it sometimes will get cut-off and the overlap code will not work properly.

In addition to this, sometimes when you scroll down on a page and then scroll back up, the top header navigation section will disappear and not be visible until you refresh the page.

Any suggestions on how these issues can be fixed?

Hi,

The footer/logo looks fine. Can you take some screenshot of problems?

I have attached screenshots of the issues with the overlapping. The images on the team page are cut-off and the logo in the footer as well.

I can't seem to duplicate the other issue of the disappearing navigation, as it doesn't happen every time.

Thanks for your help! 

On 12/14/2021 at 12:45 AM, BoulevardNorth said:

I have attached screenshots of the issues with the overlapping. The images on the team page are cut-off and the logo in the footer as well.

I can't seem to duplicate the other issue of the disappearing navigation, as it doesn't happen every time.

Thanks for your help! 

In Custom CSS, you used top: unset !important;

change it to: top: 0 !important;

div#block-6a6b2912b604c5c41077 img {
    width: auto !important;
    bottom: 25% !important;
    top: unset !important;
    right: 0;
    z-index: 999;
}

I've tried changing the unset to 0, and this fixes the issue of the images being cut off. But it doesn't keep the styling of having the image overlap the section above it.

17 hours ago, tuanphan said:

In Custom CSS, you used top: unset !important;

change it to: top: 0 !important;

div#block-6a6b2912b604c5c41077 img {
    width: auto !important;
    bottom: 25% !important;
    top: unset !important;
    right: 0;
    z-index: 999;
}

On 12/18/2021 at 3:12 AM, BoulevardNorth said:

I've tried changing the unset to 0, and this fixes the issue of the images being cut off. But it doesn't keep the styling of having the image overlap the section above it.

 

You can use negative margin to move image up, eg: margin-top: -70px; instead of using top: