Drop Down in mobile and iPad not working

Let’s first fix the issue with your broken (styled) navigation menu. Do you know what happened before it broke?

I wish I could pinpoint what that was. Everything seemed to be working fine. I did notice that the header was pointing to a css at https://www.elzasofie.com/css/main.css and it shouldn’t have been point to that one since it wasn’t in my wordpress structure. I have been trying to manipulate the header file to point to the right css file. It may have been around that time.

Now, for the first time, I’m learning about wp_enqueue_style and trying to see if I can add stylesheets using this method, though I’m a bit unfamiliar. It doesn’t appear that the main.css file I have in my css folder within my elza-child child theme is being called. Neither is my style.css in the child theme root folder.

Are you sure you have a Child Theme set up? I thought you had modified the parent theme and then renamed the folder.

I had created a child prior to changing the folder name. So I changed the name on the parent and the child theme folders.

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:

if ( !function_exists( 'child_theme_configurator_css' ) ):
    function child_theme_configurator_css() {
        wp_enqueue_style( 'chld_thm_cfg_child', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array( 'Elza-animate','Elza-fa','Elza-bootstrap','Elza-style','Elza-style' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );

// END ENQUEUE PARENT ACTION

Here’s the code in the functions.php of my child theme.

In your Child Theme functions.php file, add this:

wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() . '/css/main.css');

Does that work?

Yes. That got the main.css up there now. And I added the code for the drop down in there and it worked! That issue is solved! Thanks!

I feel like my main style.css in the child root folder isn’t being read. Shall I try adding it similarly or through a different method?

If you try adding this to your Child Theme style.css file, does anything happen:

body {
    border: 10px solid red !important;
}

?

No. Nothing happened.

Are you sure you added it to the rigth place? I don’t see it https://elzasofie.com/wp-content/themes/Elza-child/style.css?ver=4.5.3

Well, I see a https://elzasofie.com/wp-content/themes/Elza-child/style.css on the remote server. That’s the one I added it to. Would it be a different one since there’s the ?ver=4.5.3 at the end? And what does that mean?

I thoroughly appreciate your help and you educating me here.

The “?ver…” thing is only there to stop the browser caching your files *when WordPress is updated*, so no I don’t think that’s relevant.

Do you see the ‘border: 10px solid red’ code when you follow that /Elza-child/style.css’ link (in your previous post)? I would assume that you don’t. If you don’t then there’s something wrong with the way you’re transferring local changes to the remote server.

I do not see the red border.

I have tried deleting the style.css in the child root and then reuploading it. The file was properly removed and then it was transferred back into the root via ftp.

Sounds like your hosting providers might be doing some sort of caching, would it be okay to ask them about this?

I’ll have to see about getting that information from the people I’m building the site for as they did not give me details on where they were hosting and how to get into the server besides ftp.

Do you think it’s worth duplicating the css file in the same folder as main.css and linking to it as we did with main? Or will this cause a problem with the child them an linking to the parent theme?