[Resolved] Sticky Navigation with site header and logo

Home Forums Support Sticky Navigation with site header and logo

  • This topic has 7 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1018345
    Rolandas

    Hi

    Sticky Navigation is set.
    And I don’t want to use Sticky Navigation Logo.

    While browsing the page, the header and site logo are hidden.
    Is it possible to make them always visible (on desktop and mobile)?

    #1018574
    David
    Staff
    Customer Support

    Hi there,

    its possible with some CSS instead of using the built in sticky nav. But i would need to see the site – can you remove the coming soon?

    #1018854
    Rolandas

    I am sorry.
    Now I removed coming soon.

    #1019013
    David
    Staff
    Customer Support

    Disable the Sticky Navigation and try this CSS:

    .site-header, .main-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    .main-navigation {
        top: 65px;
    }
    #1019447
    Rolandas

    Hi David
    Thanks for the reply

    Desktop
    Almost works, but
    Please look through the menu items ‘Programa’ / ‘Programme’ and ‘T4’,
    while scroling, some details from pages are visible in the header
    (in both places they are made with the same technique – modifications of accordion.)
    I checked at Chrome / Firefox / Opera / Edge
    At IE without change.

    Mobile and tablet
    Chrome > Devtool > Responsive: looks the same like at desktop.
    in real (tested wiht iPad Air, iPhone 5s)
    iOS Safari (last version) – don’t work
    Chrome, Firefox Edge – works, but not always – it’s the same as desktop.

    After I wrote my answer, I made additions to CSS

    .site-header, .main-navigation {
    	position: -webkit-sticky;
    	position: sticky;
    	top: 0;
    }
    .main-navigation {
        top: 65px;
    }
    /* my addition */
    .site-header,
    .main-navigation,
    .top-bar {
    	z-index: 999;
    }

    and the situation changed

    Desktop
    Chrome, Firefox, Opera – works fine.
    Edge – works, with same small flickers above header during scroll up and down.
    At IE sticy navigation without change (but it doesn’t really matter,
    I will use the WP IE Buster plugin – to prevent users of our site from using IE).

    Mobile and tablet
    Chrome, Firefox works fine. Edge – works, but with the same small flicker in the above header.
    iOS Safari – don’t work:
    during scroll up navigation disappears, but header and logo not (which is okay),
    during scroll down navigation only appears at the top of the page.

    #1019473
    David
    Staff
    Customer Support

    You cannot use the CSS provide and the Sticky Navigation or there will be issues.
    Its one or the other.

    The anchor links e.g Programma are going to be a problem as they only calculate the sticky nav height.

    As an alternative why not use a Sticky Navigation Logo ?

    #1019778
    Rolandas

    I did not know. Now I’ve turned off Sticky Navigation and everything looks and works everywhere I wanted

    Thanks David

    #1019794
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.