Site logo

Archived topic

Sticky Navigation with site header and logo

7 replies · Started by Rolandas on September 25, 2019

Viewing posts 1–8 of 8

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

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?

I am sorry.
Now I removed coming soon.

Disable the Sticky Navigation and try this CSS:

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

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.

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 ?

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

Thanks David

Glad to be of help.

This archived topic is closed to new replies.