Turn off sticky header

Homepage › Community Forums › Epik Theme Support › Turn off sticky header

  • This topic has 3 replies, 2 voices, and was last updated 7 years ago by Wes.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 1, 2017 at 9:00 pm #21036
    Don
    Customer

      Hi, I’ve got two sites running on Epik, one from a 2013 version of the theme, one from version 1.5

      The later version (drkaimi.com) has the “sticky” or floating menu feature turned on as a default. How do I disable this so that the header bar and menu simply scrolls off the screen when the user scrolls down?

      My apologies if there is already a thread on this, I could only find a discussion on it under the Aspire theme and that didn’t match my Style sheet.

      April 3, 2017 at 4:55 am #21045
      Wes
      Moderator

        Take a look at line 1541 in your style.css for this – 

        .site-header.shrink {
	/*background-color: #222;*/
	padding: 5px 0;
	position: fixed;
}

        Remove the position: fixed and replace it with position: relative;

        Let me know if that works

        Edit: I just noticed you mentioned the Aspire theme, did you mean Epik? Or are you referring to a different site?

        April 3, 2017 at 7:09 am #21047
        Don
        Customer

          Hi Wes,
          That didn’t work, but changing it to “position: absolute” did. Thanks for pointing me at the right line of css.

          I was talking about Epik, my comment was that in my searching of the forum I had only come across a discussion pertaining to the Aspire theme.

          Thanks,
          Don

          April 3, 2017 at 2:55 pm #21050
          Wes
          Moderator

            I would use position: relative; for this. It definitely works as long as it’s added in the right section (assuming there’s nothing else conflicting with it).

            I wouldn’t use position: absolute; as it won’t show up consistently across certain browsers and will cause that part of your site to appear distorted.

            Here’s an example – https://appfinite.com/topic/three-questions-about-aspire-pro/#post-20709

            Once you add position: relative; it should work fine, as I’ve tested it on your site and it immediately removed the sticky menu. If you’ve added it in and you didn’t see a result, it may have been your browser cache. Can you add it back in, and then click your Reload button so it clears the cache, and then see if it works? If not, I can login and get it working instantly if you want. I just want to make sure it works properly in all browsers including mobile devices. Just let me know.

          • Author
            Posts
          Viewing 4 posts - 1 through 4 (of 4 total)
          • You must be logged in to reply to this topic.