[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
    Posts
  • #1221948

    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

    #1222082

    David Customer Support

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

    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

    #1222356

    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

    #1222418

    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

    #1223089

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

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

    #1223872

    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:)

    #1224239

    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?

    Thanks!

    #1224376

    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

    #1224698

    David Customer Support

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

    #masthead, #mobile-header {

    #1225210

    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!

    #1225542

    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.