Site Header Issue – EPIK 1.5

Homepage › Community Forums › Epik Theme Support › Site Header Issue – EPIK 1.5

Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 1, 2016 at 7:38 pm #19311
    Serio
    Customer

      Hi,

      I’ve disabled the .site-header.shrink @media only screen and (max-width 1023px) by adding

      .`site-header.shrink {
      display: none;
      }`

      The header does not show up anymore below max-width 1023px (as planned) but the catch is that the screen doesn’t scroll down smoothly on a cell phone now: It jerks where the site header would be making it’s appearance (had it not been disabled).

      Any ideas on a fix?

      Cheers

      September 1, 2016 at 11:36 pm #19317
      Wes
      Moderator

        Do you have a link so I can see how it looks?

        September 1, 2016 at 11:42 pm #19321
        Serio
        Customer
          This reply has been marked as private.
          September 5, 2016 at 7:48 pm #19340
          Serio
          Customer

            Any thoughts?

            September 6, 2016 at 4:18 pm #19346
            Wes
            Moderator

              Ok, let me check a few things to see if I can figure out what it could be.

              September 6, 2016 at 10:03 pm #19352
              Wes
              Moderator

                So it looks like the only way to prevent it from doing that is to change the position to relative in the Responsive section of the CSS. If you add this in your responsive section around line 3875 – 

                	.site-header.shrink {
		position: relative; 
	}

                …it will eliminate the jumping effect. I tested this by adding it under the section labeled –

                @media only screen and (max-width: 767px) { Which is located on line 3875 in your CSS.

                Give that a try and let me know if it works.

                September 6, 2016 at 10:48 pm #19357
                Serio
                Customer

                  Hi Wes,

                  Thanks for the response.

                  I implemented the code as instructed (line 3877) but it’s still jumping when I scroll down.

                  I’ve cleared the cache in Chrome (on my Android phone) and cleared the cache through WordPress, but it’s still persisting.

                  Any other ideas?

                  Thanks again.

                  September 6, 2016 at 11:36 pm #19358
                  Wes
                  Moderator

                    You added display: none; on line 3531 in your CSS – 

                    	/*added to cancel static heade*/
	.site-header.shrink {
	/*background-color: #222;*/
	display: none;
	}

                    If you remove that then it should work.

                    When I originally tested my suggested code, it was based on the Demo. However since you added the display: none; customization to your code it appears to be what’s causing the jump.

                    Removing that should fix it for the browser sizes viewing your site at 767px width or less.

                    Let me know!

                    September 7, 2016 at 12:01 am #19359
                    Serio
                    Customer

                      Alright, looks like it worked.

                      There’s just a tiny hiccup there now instead of a big jump, which is totally fine.

                      I ended up moving the code you gave me to the max-width: 1023px section instead of @767px.

                      With the size of my logo, the .site-header was taking up too much real estate at smaller screens when scrolling.

                      Thanks for your help, much appreciated =)

                      September 7, 2016 at 11:15 am #19362
                      Wes
                      Moderator

                        You’re Welcome!

                      • Author
                        Posts
                      Viewing 10 posts - 1 through 10 (of 10 total)
                      • The topic ‘Site Header Issue – EPIK 1.5’ is closed to new replies.