[Resolved] Sticky Navigation with site header and logo

[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)?

[David]

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?

[Rolandas]

I am sorry.
Now I removed coming soon.

[David]

Disable the Sticky Navigation and try this CSS:

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

[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.

[David]

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 ?

[Rolandas]

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

Thanks David

[David]

Glad to be of help.

[Author]

Posts