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

[t29k75]

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

thanks,

Tibor

[David]

Hi there,

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

https://docs.generatepress.com/article/option_generate_menu_plus_settings/

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;
}

[t29k75]

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,

Tibor

[David]

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

[t29k75]

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?
thanks

[David]

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 {
        margin:20px
    }
}

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

[t29k75]

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]

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?

Thanks!

[t29k75]

Hi Tom,

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

https://i.paste.pics/8IYOT.png
https://i.paste.pics/8IYP3.png

[David]

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

#masthead, #mobile-header {

[t29k75]

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]

Glad we could be of help

[Author]

Posts