Desktop Header Width Before Scroll / Mobile Logo After Scroll

  • Resolved toddlerh

    (@toddlerh)


    11 months ago

    I’ve installed the plugin on my site and it’s working pretty well, but I have a couple small issues I’m looking to fix before installing it on other sites.

    1. The header should be at full width before scrolling. Since installing the plugin, it seems to stop short of full width for desktop screens before scrolling. It does extend to full width once I scroll down and the plugin takes effect.
    2. When I scroll down on my mobile homepage, the logo at center disappears. It seems to appear fine on the sticky scrolling header for post pages.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Robert Wattner

    (@rwattner)

    Hi,

    1. I noticed the header has a position property of “left: -261” for some reason. Removing that allows the header to be center. Then, the header is only 1400px wide because it’s inside the site container. Once it becomes “sticky” (position:fixed) it’s removed from the flow and can then become fullscreen width.

    The plugin only adds the property “width:100%” I don’t think that is the problem.

    I would look into the site layout, page layout, and section/container settings to allow the header to be full width.

    2. I’m not seeing the logo disappear. I views the page on several devices. Could it possibly be a local cache situation? Something is causing the logo size transition to be ignored. That is usually caused my css combination/minification or some other type of optimization.

    I hope this helps you figure it out. Let me know know it goes.

    Thread Starter toddlerh

    (@toddlerh)

    Thanks!

    1. Can you let me know where the position property of left: -261 was? I looked for it but was unable to find it – I’ll look into other adjustments once I’m able to remove it.

    2. Perhaps it was just a local cache issue. I removed a bit of CSS that was hiding the site logo for mobile devices (this was for our old header setup) which seemed to help.

    I do have the Asset Cleanup and Autoptimize plugins so I’ll do some testing on the logo size transition being ignored.

    Plugin Contributor Robert Wattner

    (@rwattner)

    The negative left position is on the element itself. I’m not sure where it’s coming from.

    https://drive.google.com/file/d/1jCZyREHkK5N7yPS6Uu9JSYtJxhzYV21j/view?usp=drivesdk

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Desktop Header Width Before Scroll / Mobile Logo After Scroll’ is closed to new replies.