Bob

@mrfoxtalbot Thank you, Alvaro!

I moved the lower Column block you highlighted up and then deleted the un-needed Column blocks.

I don’t recall how I did it, TBJ – when I tried to drag it to just beneath the “Group” block, that didn’t work: I didn’t see the little underline that shows where you can drop a block, and it wouldn’t let me drop it there. But somehow I eventually moved it. The list view now looks like this:

At that point, the footer columns were centered, but in a wide desktop browser window, they were a bit far apart, with the text on the right column going outside the text of the Content area, as in the screen shot below. (Not a big deal, but I liked how the columns were closer together in the above screen shots.)

I selected the Group block just above the top Columns block, toggled on “Inner blocks use content width”, and set the “content” and “wide” values to 1,000 px. That fixed it.

Thanks again, @mrfoxtalbot!

• This reply was modified 1 year, 11 months ago by Bob.

There are already just two columns in the footer template: “More” and “Subscribe”! The copyright info is in a separate paragraph block below.

And yes, I want those two columns to each take up half the space.

It looks fine in the Template Editor:

It also looks fine if I switch from “List” view to “Live” view.

• This reply was modified 1 year, 11 months ago by Bob.
• This reply was modified 1 year, 11 months ago by Bob.

Correction: I observed the issue in desktop browsers (Safari, Brave, Firefox and Opera) on macOS Monterey (latest).

In iPad OS (16.4) the footer elements are centered. I checked in the latest versions of Safari, Chrome, Firefox, and Brave for iPad.

WordPress version is 6.2

• This reply was modified 1 year, 11 months ago by Bob.
• This reply was modified 1 year, 11 months ago by Bob.

Thanks very much @tobiasbg ! That worked!

Before posting, I had tried that without the row-specific code. It seemed that it wasn’t working when I checked in Safari on my iPhone 13. Now I realize the problem was that I had failed to delete the Safari cache – I was simply refreshing the page.

So, for beginners like me who stumble upon this post, delete your browser cache after making edits!

Thanks again!

Bob

@hikinmike On your testing site, did you create the menu from scratch in Twenty Twenty-Two, or was it a previously-existing menu?

I applied Twenty-Twenty Two to an existing site and used the old menu. I wonder if that could be the source of the problem. I might try making a menu from scratch and see if the results are different, but with your help, the old menu works fine.

It appears the problem was with some menu-related custom CSS I had added for the previous theme but neglected to remove until now.

When I removed it, the problem went away.

When I switched to Twenty Twenty-Two, I copied over all the custom CSS from the previous theme because much of it is still useful – like for customized audio players. Lesson learned!

In case it wasn’t clear, in “Additional CSS Classes”, the only thing to enter is “home-menu” (without quotes) – not the whole code snippet.

Instead of “home-menu”, you could use any name you want for the class. Let’s say you called it “example” instead. In that case, the CSS code for the static home page would be:

.home .wp-block-navigation-item.example.wp-block-navigation-link,
.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
  color: #365ABA !important;
}

I checked your site, and if I understand the Inspector info correctly, you might have pasted in the whole bit of code.

Be sure you add the Additional CSS class to ONLY the page that’s chosen as your static home page in Settings > Reading Settings.

You add the custom class to that page’s link in the Navigation editor (not to the page in the Page/Post Editor).

Here’s a step-by-step, just in case:

Go to the Site Editor and click on Navigation (I like to select it in List View). You might have to open the Header to see “Navigation.” Then click on the little chevron icon to the left of the word “Navigation” to open the list of pages in the menu. (On my site, it takes a few seconds for the chevron icon to appear.) Then click on the page you’re using as the static home page, and add the Additional CSS class in the right column.

If none of this works, I’m not sure where to look next – I only know a little HTML and CSS! If you made any edits to style.css, un-do them if you haven’t already.

Does this help?

I’ve never edited that style sheet. I think it’s not recommended unless you’re using a child theme, because the style sheet might be overwritten when the theme is updated (if you didn’t know, themes are occasionally updated with security patches, bug fixes, enhancements, etc).

I use a plugin called Site Origin CSS, and another one I considered is Simple CSS by Tom Usborne, developer of the well-regarded Generatepress theme.

I suggest you remove the code you added to style.css and try one of those (or another CSS plugin).

Additional info:

First: in case it wasn’t clear, I’m using the desktop menu on the iPad.

My parent menus were missing a hash symbol (#).

When I added it, the problem resolved on Safari for iPad OS.

But in Chrome, Firefox, and Brave for iPad OS, the behavior is erratic after adding the hash.

If you’re on the home page and tap on a parent menu item, it works as expected/desired: the sub-menu appears and stays until you tap away.

If you’re on any other page and tap on a parent menu item, one of two things happens: sometimes it behaves as expected, and sometimes the sub-menu appears briefly, disappears, and then the page refreshes.

With the overlay menu in iOS (iPhone 13, everything current), if you’re on the home page and tap on a parent menu item, nothing happens – which is the desired behavior.

However, if you’re on any other page, tapping on a parent menu item refreshes the page you’re on.

Yes, there is, but you need to add custom CSS (I use a plugin).

This worked for me, except for the static home page:

.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
		color: #365ABA !important;
}

Of course, change the color code to your desired color.

For the static home page, I had to add a CSS class to that page’s menu item in the menu editor (I used ‘home-menu’, but you can choose your own tag). Then, in this post, another forum member kindly figured out that it can be targeted with this code:

.home .wp-block-navigation-item.home-menu.wp-block-navigation-link,
.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
  color: #365ABA !important;
}

Again, replace my color with your own.

For reasons I don’t understand, without the custom CSS class, the static home page doesn’t receive a “current-menu-item” tag (unless I missed it).

Hope this helps.

I guess it makes sense that “Home” has a separate class, since it’s selected in “Settings > Reading Settings”.

I’m really just a guy that knows just enough HTML/CSS to be dangerous

Same here, except more dangerous since I know less! ??

Thanks again for the help!

Here’s a screen shot (also from Brave).

Another thing I don’t understand is that when other pages are current, in the “Elements” column of the Inspector, a couple of lines above the <span> element for the item label, is a “current-menu-item” class (like this); but that class doesn’t appear for the home page (link).

Thanks!

• This reply was modified 2 years, 9 months ago by Bob.

Perfect! Thanks so much, @hikinmike ! (I was looking in the wrong place in the Inspector.)

I’m curious: after adding that CSS, the color style is crossed out and grayed out in the Inspector. I thought that means it’s overridden by a more specific style. But when I un-check the checkbox next to it, the color reverts to black, which I assume means it is taking effect. Any explanation would be much appreciated!

Thanks for the reply, but it appears you didn’t understand my post.

The only problem was when I tried to send a TEST email. I tried three different methods, as I mentioned, and none of them worked (including the default WordPress email function).

But when I created and ran a real backup task, my preferred method – using the WPMail SMTP plugin – worked. And scheduled backups have continued to work since then!

Based on my tests, it appears there could be a problem with the test email feature, but if nobody else is reporting a similar problem, maybe it’s just something in my setup.

• This reply was modified 2 years, 9 months ago by Bob.

If you didn’t know, the Full Site Editor is very different from the classic editor, and the 2022 theme is designed to be used with FSE (I think it’s the most compatible default theme to date).

Yes, it’s shocking when you go to the “Appearance“ menu and find all the classic editor elements are gone!

Until a week ago, maybe less, I’d disabled Gutenberg on my site (with the ‘Disable Gutenberg’ plugin). I didn’t have the time or inclination to learn it; the classic editor was fine for my site, which is low traffic, consists mostly of static pages, and which I haven’t been updating much in recent years.

But I finally explored full site editing and took the helpful three-part FSE course here on the WordPress site, and I’m not looking back.

To get familiar with FSE, I decided to try to re-create the design of my old website (created with an old paid site-building theme) with 2022 as a starting point. Much to my surprise, I was pretty much able to do it!

One glaring omission at this point is the lack of a place to add custom CSS, but there are good plug-ins for that. I suspect/hope they’ll add it later.

Other issues: In-line help is lacking, edit mode is slow to load, parts of the GUI are unintuitive, and it often feels clunky. (“List view” is great, though!)

But it’s powerful, and once you get the hang of it, you can do things which in the past required either coding or a third-party site builder, such as make custom templates and custom template parts.

Hope this helps!