Skip to content

Fixed/Sticky Header or Menu on Scroll

In this article

    Total includes built-in support for a sticky/fixed header or menu that remains visible as visitors scroll. You can customize or disable this feature through the Customizer for the default header style, or through the Header Builder settings for custom headers.

    Go to Appearance > Customize > Header > Sticky Header to enable, disable and/or modify your Sticky Header.

    For header styles that feature a full-width menu, only the menu becomes sticky and not the entire header. This is prevent taking up so much viewport space and provide a better UI to the end user. For these case you will see a Sticky Menu field like such:

    Help, only my menu is sticky! Certain Header Styles will actually have a sticky “Menu” instead of a sticky header because these header styles may be too large for a full sticky header so having only the menu sticky looks and functions better. However, you can use the Total Sticky Header Two, Three, Four plugin if you wanted to change this behavior (not recommended). Or you an create a custom Header template via the Header Builder.

    Sticky on Scroll-Up?

    By default the Sticky Header function in Total runs whenever you scroll down the header becomes sticky and visible. However, due to popular requests we made a free beta plugin which makes the header sticky only when scrolling back up (as opposed to scrolling down). You can get this plugin from WordPress.org.

    Shrink Sticky Header Notes

    When selecting one of the Shrink header styles you will be promoted to enter a start and shrunk height for your logo. This is because the shrink header style is achieved by making your header smaller since the header height is by default defined by the height of your logo size. For the start height you will probably want to enter your native logo image height and for the shrunk height you will want to enter any value that is smaller.

    Below is a small video guide showing how to set things up.

    This content is hosted by YouTube. Loading it may set cookies. Accept to view.

    Related Articles
    Back To Top