Sticky Header, but hide the centered logo when scrolling down

Hi,

@Victoria:sorry for the inconvenience, this stupid instagram plugin is always messing around, I renewed the access token, should be fine for a while.
(This error message is only visible if logged in.)

@Ismael: Thanks for the help!
But not yet 100% what I meant (it seems that I was not 100% accurate with my description).

When scrolling down, not only the logo should disappear, but also ONLY the thin menu bar should remain (see screenshot), I want to keep as much screen for the content below.
( the social media icons could also be moved down to the menu bar, since there is enough available space).

Is that possible?

• This reply was modified 5 years, 11 months ago by catchbudapest.

Oh damn, I just realized that in my previous post I added the wrong link at the example for the border below the menu bar.

I actually wanted to link to this example.
(I corrected the link also in the post above).

Thank you so much @Ismael!!
It’s exactly what I wanted to achieve!

The only thing I am not yet 100% satisfied is the single post page, where the effect of ‘hiding the logo when scrolling’ doesn’t work.

Is it possible to shrink the header/logo at least a bit in the single post page? (in order to give the reader more space for the content/body)
I already tried the “Shrinking Header” setting in the theme-options –> “header behavior”; but it seems that it has no effect with the centered logo and current CSS-modifications/settings.

@ismael: That’s a good idea! I will check that out next week and will report then (currently I am on a leave…)

Hi @ismael,

I am back and checked the CSS-code now; unfortunately the following points are not yet working properly:

1. The code to set the header not to stick on the single post pages causes a gap between menu and featured image.
(See screenshot here), therefore I removed it for now.
(but the effect of not to stick on the single post pages works fine :)

2. On my tablet the logo background is black instead of white (see screenshot here). On my mobile it is still white as it is supposed to be.

3. On my tablet the search symbol is overlapping with the logo (see screenshot here).

Thanks @ismael!!
The code to remove the space between the header and the main container worked!

I will open a new thread for the rest.

• This reply was modified 5 years, 11 months ago by catchbudapest. Reason: small correction

Hi @ismael!

I found another issue. I have some pages with “Header visibility and transparency” setting on “No transparency”.

In this cases the Logo is not shown (only the menu), e.g. see here.

And on mobile devices there is no menu at all!!

How can we get back the logo (and the menu on mobiles) for theses cases/pages?
The same view as for the single post pages would be fine as well (logo on top of the menu but not sticky).

• This reply was modified 5 years, 11 months ago by catchbudapest. Reason: sentence for mobile devices added

Hi @ismael,

removing the code:

#top .av-logo-container {
    display: none;
}

brings back the logo and the mobile menu for this pages, but it also removes the effect of hiding the logo when scrolling down.

So what I would like to achieve is to keep this effect, but bring back the logo on specific pages (where the “Header visibility and transparency” is set on “No transparency”.

I tried this code to address a certain page:

.page-id-7219 #top .av-logo-container {
    display: block;
}

But it didn’t work.

Hope it is still clear what I am trying to achieve, I summarize:

– Where possible I want to have the effect of hiding the logo when scrolling down .

– On single post pages (where this effect is not possible) it is fine to have a non sticky header.

– on pages where the “Header visibility and transparency” is set on “No transparency” (e.g. here, I would like to have effect of hiding the logo when scrolling down if possilbe. If not possible then I am fine with a non sticky header as for the single post pages.

Hope not too confusing :)

Brilliant @ismael, that works!
The logo is back for the 2 relevant pages (page-id-7219 and page-id-7690).

Would it also be possible to realize a non sticky header for these 2 pages (as we did it for the single post pages).

My current CSS-code for this matter looks like this:

#top .av-logo-container {
    display: none;
}

#top .av_header_transparency .av-logo-container {
    display: block;
}

#top.single .av-logo-container {
    display: block;
}

#top.page-id-7219 .av-logo-container {
    display: block;
}

#top.page-id-7690 .av-logo-container {
    display: block;
}

@media only screen and (min-width: 768px) {
.responsive.html_mobile_menu_tablet #top.single #wrap_all #header {
    position: relative;
    width: 100%;
    float: none;
    height: auto;
    margin: 0 !important;
    opacity: 1;
    min-height: 0;
}

.html_header_top.html_header_sticky #top.single #wrap_all #main {
    padding-top: 0;
}
}

Hi @Ismael,

here are the links to the 2 pages, for which I would like a non sticky header (as we did it for the single post pages):
https://www.catchbudapest.com/hungarian-histories-book/
https://www.catchbudapest.com/budapest-guidebook/