Support » Theme: Karuna » Fixed header bug (Karuna)

  • Hi!

    Just wanna report what I believe is a (tiny) bug in the Karuna theme.

    It’s about var stuckHeader = $( '.sticky-wrapper.sticking' ); and var stickyHeaderHeight = stuckHeader.outerHeight(); in functions.js, really.

    On page load, there’s no .sticking class on the .sticky-wrapper div. As such, stickyHeaderHeight ends up being null. (Can be seen writing stickyHeaderHeight to the console.)

    As a result, no padding-top is added to body on scroll, and the page kind of ‘jumps up’. This is noticeable especially when the header image is not set. (Headings — or the page-wide header widget, if in use — will suddenly disappear behind the fixed header on scroll, making them a bit harder to read.)

    A quick fix would be to be to hard-code a (large enough) value (in px or ems) into the JavaScript file.

    Another, and I believe cleaner (or at least less jerky in e.g. Firefox) fix I’ve used (at, e.g.), is to assign position: static to the entire header (through an extra wrapper div) and a hard-coded offset to body. (Upon scroll, the .sticky-wrapper div will sit ‘on top’ of the (now hidden) top-bar. No need to hide it or add padding to body. You would still need to know the (almost) exact final sticking header height, though.

    • This topic was modified 4 years, 2 months ago by Jan Boddez.
    • This topic was modified 4 years, 2 months ago by Jan Boddez. Reason: Typos
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Kathryn


    Automattic Happiness Engineer

    Hi @janboddez – thanks for the detailed report! I’ve passed it along to our developers so they can have a look and we’ll keep you posted here.

    Theme Author Automattic



    Thanks much for this report! We’ve made a fix to Karuna which should take care of this in the next version of the theme.


Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Fixed header bug (Karuna)’ is closed to new replies.