header not available or deleted when child theme just created

I also have couple additional questions:

1. will I lose my customization to pattern in child theme?
2. If I duplicate the patterns and they show up in My Pattern, then I customize them, will I lose them when theme updates?
3. In the Additional CSS in block, there sometimes is theme code already, e.g. is-style-animated. If I want to add more code after this, should I use a comma or semicolon, I tried both but it seems the exiting theme code there loses function instantly. so should I leave a space instead of comma or semicolon?
4. for CSS @keyframe animation, no matter I add to the Additional CSS in block settings, or in the customize theme settings, since it falls out of the code flow as in CSS sheet, how do I apply to certain property? What I want to do is to add a background image for the contact form pattern, then make the hue changes over time. In my css sheet, it just says like @keyframe animateBG right after the .form {bg …}, but this flow doesn’t exit in the Additional CSS, how does wp know which bg I am applying this animation to?

Hi,

Please check your theme file and look for the header.html to check if it exists.

if not, try downloading the theme file from wp.org and add back the header.html to your site theme.

• on theme update, pattern customization will not reset. unless you delete the theme, and reinstall them.
• can you show us with screen capture how you add the custom CSS?
• you need to add the correct selector. if you use gutenverse block, there should be a toolbar popup with the block id in the editor. you can use that to identify the block:

then add your CSS :

@keyframes customKeyframe {
      0% {
        transform: translateX(0);
        opacity: 1;
      }
      50% {
        transform: translateX(50px);
        opacity: 0.5;
      }
      100% {
        transform: translateX(100px);
        opacity: 1;
      }
    }

    .guten-pg5XAB {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: customKeyframe 3s ease-in-out infinite;
    }

Thank you very much! I will check if the header.html is still there, I’m using wp code now, but will try gutenverse block.

Hi, I created a new staging site today, installed ZEEVER theme fresh, created a child theme instantly with Child Theme Configurator, and no there’s no header.

I checked, the header.html exists in the parent theme under parts, in the child theme, only two file, function and stylesheet.

Now what could I do?

As to the additional, I checked the block class and id using Chrome inspect. but the @keyframe doesn’t have a class or id to show which part I want to add this animation to.

My problem with the additional css is that, when there is some default css of the theme already there in the additional css settings in the block settings, how do I separate that with the new css code I want to add there? it seems anything I add after that, will make the default code lose function instantly, so I think I should somehow separate that default code part, but not sure how, space didn’t work, colon or semicolon not working either.

Thank you again, looking forward to hearing from you soon!

Hi,

If the header.html exists, now try to check gutenverse-header.php from inc/pattern/gutenverse-header.php. see if the file exists and content is not empty. also, set Zeever as the active theme and go to Appearance>Editor>Pattern>Header and see if you can see the content.

I am not familiar with Child Theme Configurator. Can you send your css code with the keyframe? and how did you apply it?

Hi

I ended up create my own header pattern and template, applied on each page, the site only have 6 pages. But now run into another issue, the hamburger menu. In the block settings, I chose the 3 bar menu, chose Mobile only, and chose ‘click to open’. But I tested on my tablet and cellphones, once I click on the 3 bar menu, it just shows up a blank white screen, didn’t go anywhere, or open the menu list. Is there any step I missed in the settings? or is there any plug-in required to make this work?

Can you please help me with this one?

Thank you so so much!

Hi,

It is probably because the text color of your menu is the same color as the background.

Try changing the background of the menu popup on mobile.
If you use Gutenverse as your navigation block, you can follow these steps to change your mobile menu popup background.
https://imgur.com/a/yDTtZbw

Hi

No that’s not the case. it more looks like broke when I click on the hamburger menu, if only because of the color, I should still be able to find the change of cursor at the menu item area when I hover my mouse around. And I am not expecting the menu would take the entire screen.

Hi,

Do you have any sites I can check on?

Do you know how to inspect elements on your browser? you can inspect the mobile nav menu and see if the menu is there or not. try to change the text color and see if it does anything.

if you can share a link where we can see the content it would be easier to check what the issue is.

Hi, I checked again, and figured it is actually the color problem. So I installed Gutenverse, but didn’t show the option for changing the colours as in your screenshot. Here is a screenshot

View post on imgur.com

and style tab

sorry for these very basic issues, this is my very first wordpress experience, so far to integrate into a wordpress hosting took me longer than making this site in html/css/javascript initially.

I use the inpect on Chrome and View Page source on Safari to identify the elements on a page, impressed how long the classes are in wordpress ??

I got it! It was not the right class, this round I tried every class in the nav block, one worked. Thank you so so much for your patience with a total wordpress starter, and super appreciated for all your help and guidance!

Hi,

I’m glad to hear it’s working for you! Just to clarify, the Zeever theme—or any Gutenverse theme—has two base folders: one that uses Gutenberg (WordPress’ default blocks) and another that uses Gutenverse blocks. If you install the Gutenverse plugin before making any changes, the theme automatically switches to use Gutenverse blocks. However, since you made changes before installing Gutenverse, the theme is still using the basic template.

Transitioning from vanilla web development to WordPress is indeed a challenge, but once you get familiar with it, WordPress becomes a powerful tool that can significantly reduce development time. Starting with creating a child theme is a great move! I recommend learning about WordPress hooks and eventually building your own simple theme from scratch. This will give you a solid foundation in WordPress development and set you on the path to creating your own plugins.

Speaking of plugins, if you’re primarily focused on web development through WordPress, make sure to explore the many available plugins, including free ones like Gutenverse. Gutenverse’s library, for instance, offers over 700 templates that you can customize, saving you time from building sections like team cards from scratch.

other plugins like: woocommerce, yoast seo, jetpack, etc. are also popular and can help you develop your site