[Resolved] Fixed Navigation as a header (except Home page)

Home Forums Support Fixed Navigation as a header (except Home page)

This topic contains 11 replies, has 3 voices, and was last updated by  David 1 month, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #1221948


    Hi guys,

    I would like to set up fixed “navigation as a header” on all pages/posts (while not using sticky navigation), except home page.

    my site: surf-atlantic




    David Customer Support

    Hi there,

    you can use this filter to set the menu options for specific pages:


    For example this will enable Sticky Nav on Desktop and Mobile for all of the site apart from the Home Page:

    add_filter( 'option_generate_menu_plus_settings','lh_custom_homepage_menu_plus_settings' );
    function lh_custom_homepage_menu_plus_settings( $options ) {
        if ( !is_front_page() ) {
            $options['sticky_menu'] = 'true';
        return $options;


    Hi David,

    thanks for your reply.

    I didn’t explain it correctly;)
    Anyway, did some digging and applied Tom’s solution (#31579). Is it still “best” way to do it, considering it was from 2014?

    All looks good now except 2 pages blog page and reviews page

    How/what can I adjust/change to get it right?

    …and any chance to apply “new fixed header” on homepage as well, but that it will only appear when scrolling, after hero image disappear?

    hope it makes sense,



    David Customer Support

    What was wrong with using the Sticky Navigation function ?

    That method is still perfectly valid – the issue you have is the closing </div> in the after_header needs a lower priority number set, so it comes before the Header Element. Try changing the priority to 8

    Fixing the header to appear after the page hero scrolls off screen would require some Javascript – and i am not sure of the best method for this



    nothing wrong with sticky nav, like the look of fixed header more…

    I set priority to 8 -> looks better. Just need to add top-padding to both pages (reviews header and blog header) and centre posts on blog page (left & right padding not equal now). Any idea?


    David Customer Support

    Maybe simpler to add margin-top instead of padding-top in your fixed header CSS this will push the element down as opposed to increasing the height of the element after it.

    This CSS is causing the issue with the Blog articles not being centred:

    @media (min-width: 1024px) {
        .container {

    You may want to target the .page .container so it doesn’t break the archives or the single posts.



    Hi David,
    your margin suggestion worked great!
    To make things simple, I deleted all media queries/margins for container and all looks good.

    Last question: how can I add shadow at the bottom of header/nav up to 1023px? It is there from 1024px and higher. I think bellow css is responsible for that…

    #masthead {
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.25);

    thanks for your patience:)


    Tom Lead Developer

    Hi there,

    I’m seeing that CSS applied at all screen sizes at the moment. Are you seeing something different on large sizes vs smaller? If so, can you share a screenshot?




    Hi Tom,

    please see screenshots. I checked my mobile & ipad as well. No shadow up to 1024px.



    David Customer Support

    You have the Mobile Header enabled. So you must include #mobile-header in your CSS e.g

    #masthead, #mobile-header {



    David, Tom, you are legends.

    …now if I can somehow find a way to show menu on home page. my next task/head scratcher 😉

    Thanks a million!


    David Customer Support

    Glad we could be of help

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.