A few bugs

This is how I found the solution:

.sticky-status {
    display: none !important;
}

??

Sorry about this error.

When a post is made sticky, it should only show up as sticky on the main blog page and WP doesn’t normally keep it at the top of category pages or page 2+ of the blog. For that reason, there shouldn’t even be a “Featured” overlay at all, so that sounds like an issue. If you can link me to the page, I can check it out for you.

OK. Let me show you an example on my other site: halilsn.com (Please stay in Turkish)

I pinned a post and each page should have 8 posts. On the first page, however, there are 9 posts. And the “featured” tag hangs on page 2 and shows another post.

There is also a mistake that I told you earlier. It came with the iOS 15.4 update.

I took the video:
https://youtube.com/shorts/bfBOpEHmnbU

Also, sometimes on mobile, the top of the drop-down menu is not directly below the header bar. There is some space left. But this doesn’t always happen.

Thanks for the link.

Here is a fix for the “Featured” text being out of place:

.paged .sticky-status {
  display: none;
}

There isn’t anything in Mission News that should modify the post query and cause more or fewer posts to show up. Did this just start happening on the site? Maybe there was a change in the child theme or a plugin that may have introduced this issue?

The space on the left is not a bug but rather the “tablet” design. This is to prevent the menu from stretching extremely wide, which makes it harder to navigate well.

I’m having trouble recreating the same menu flicker bug after testing on both Chrome and Safari. Are you using one of those two browsers on your mobile device?

It happens on both systems. Moreover, there is no plugin or change to trigger this. I don’t know if there is.

Not on the left. Below the title bar. Sometimes happen. A little margin is added when it should be bottom under it.

Yes, I am using Safari.

So I looked into this more, and apparently, this is how WP has always handled sticky posts. If you set the homepage for 8 posts and the sticky post isn’t already included, it gets added as a 9th post. It’s pretty annoying because if the sticky post is in the 8 most recent posts, only 8 posts get displayed.

As a workaround, you could switch your site to use 9 posts per page and enable the option to make the first post extra large in Layout > Post Previews. That will ensure your rows come out even on every archive page.

—

I’m having trouble recreating the margin above the mobile menu, but try adding this and let me know if it stops that from happening:

#menu-primary-container.open {
  top: 72px !important;
}

—

As for the menu glitch, I’m still looking into this, but it seems to be an issue with Safari. I’m not sure if this will work as it’s quite experimental, but you can try the following CSS and see if it resolves the flickering issue:

#menu-primary-container {
  will-change: opacity, visibility, transform;
}

I guess the solution to the post count is to set it to 9 instead of 10. I don’t care if the first post is too big because it’s too prominent.

Speaking of which, I can’t add anything after the first message in double post format. I add, but the order is broken.

Trying:
https://i.hizliresim.com/oz7jyts.jpg

I think it should have stood in second place as if it were a post.

If we go back to the mobile menu, I think that the space at the top is caused by Safari’s experimental problems. (maybe I changed something unintentionally) However, I haven’t had this problem for the past day.

When I added the second code the flickering continued. If I’m not mistaken, this happened after the iOS 15.4 update. I think it will be fixed in new updates. I will try it on other devices when I get the chance.

There is also this problem: If there is no place to scroll in the menu, scrolling includes the page. This is probably still happening in Safari but I’m not sure.

Here:
https://youtube.com/shorts/6e4iufOEVS4?feature=share

haha! By the way, while shooting this video, the space at the top was formed again. ?? I will use the code you gave. But for that, to adjust the height according to the width one by one. Does this vary by device? I don’t think it’s necessary.

I noticed another place. The mobile menu does not open when it is 799px wide.

Here is the demo:
https://www.youtube.com/watch?v=-aqjPJjWPII

Do you think the error here might be related to the theme?

Good catch with the ad placement. I’ll have to release a fix so that widget area works properly with the double layout.

This code should fix the menu flicker:

#menu-primary-container {
  transition: visibility 0.1s, transform 0.1s;
}

That will disable the opacity transition and then the menu will slide out without the fade transition that is currently bugged in Safari.

As for the space above the menu, let’s give it one more try with this code:

#menu-primary-container.open {
  top: 57px !important;
}
@media all and (min-width: 600px) {
  #menu-primary-container.open {
    top: 72px !important;
  }
}

The background scrolling issue is something I have already solved numerous times over the years, so it’s very disheartening that Safari keeps reintroducing this issue. I will look into this but it’s going to take some time to figure out.

Thank you. It worked in both codes. The shaking is gone. I don’t think the gap will occur anymore since it is an absolute limit when I adjust it according to its height.

What about this? When the menu is opened on mobile, clicking on the logo and the search button will be blocked. Or have the menu close first. I can imagine the difficulty, but clicking search at the same time with the menu open messes things up.

What do you think about the problem with 799px? Menu does not open at 799px. At 800px, the top menu and social media icons come under the main menu.

First and again, very thanks.

OK. I handled the popup search box with z-index.

Okay nice work with the z-index fix.

I actually don’t have that same bug with the menu not opening at 799px. I tried in Chrome and Safari and the mobile menu always opens.

As for 800px, I do see the issue with the social icons showing below the menu. I can make a tweak to the Javascript that handles the transition to fix that. Also, this error doesn’t occur if you load the website at 800px wide. It only occurs if the site is less than 800px wide and then resized to exactly 800px wide, so it is very unlikely it’s affecting any visitors so far.

I realized the mistake I made. I wrote 800px for both min’s and max’s. I set this to min-width: 800px and max-width: 799px.

Problems in 800px solved. However, I noticed that the codes in 799px are invalid. But it works when it comes to 798px. It’s the same when I refresh the page. max-width: shouldn’t 799px work at 799px as well?

Yea the values in media queries are inclusive, so setting max-width to 799px should include 799px and lower. I’m not sure why this would be otherwise on the site, but you might want to try isolating this code by removing everything else temporarily just to check if there’s a conflict with some other existing custom CSS.