Menu dropdown only shows first option

I found the problem must be in the style.css

Because I updated the theme which resolved the problem (but the CSS was overruled by the update) after I placed back the old CSS into the new updated page the problem was there again.

Hi there,

I took a look at your site’s CSS and found that overflow-y: hidden; is being applied to your site’s header with the following:

.site-header {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    overflow-y: hidden;
}

The above snippet does not appear in the theme’s original style.css file and is the cause of your dropdown menu being hidden.

overflow-y: hidden; should be removed in order to stop the problem.

As an extra note: You should not edit your theme’s style.css or any other files directly as, as you’ve experienced, changes will be lost when it comes time to update your theme.

To make changes to your theme you should instead set up a child theme.

If you only wish to make changes to your theme’s CSS then a custom CSS plugin will work for your needs. (If you already have Jetpack installed then you can activate its custom CSS module.)

Let me know if that helps or if you have any further questions around getting set up with a child theme.

Oh my god! You are the besstttt!

Thank you greatly.

Regarding your note about not editing my themes style.css, I knew I was getting in problems by doing it this way. But Im really new to making websites so Im just really glad I came this far already.

But is it too late to use the custom CSS now? because Ive made so much changes already in the CSS and even some PHP files.. I lost complete overview of the changes.

Thanks again, Im shocked at how good of a help your response was to me.

Also what I dont quite understand is how a child theme will help in this case. I understand that the changes I make then will not be in the original theme. But if I update, the theme CSS snaps back to the original right? So you still have to adjust the CSS into the child’s one again.

I resolved it this time by downloading the backup I made before the update, extracting the CSS from that backup and replacing it with the updated theme CSS in filezilla.

Or are these just two ways of actually doing exactly the same?

I’m so glad that helped you. ??

Also what I dont quite understand is how a child theme will help in this case. I understand that the changes I make then will not be in the original theme. But if I update, the theme CSS snaps back to the original right? So you still have to adjust the CSS into the child’s one again.

Child theme’s exist in their own directory, outside of your parent theme. Therefore, when it comes time to update your theme, your child theme will remain as it is while only your parent theme’s code will be updated.

My coworker, Kathryn, does a wonderful job of explaining how child themes work in her talk here:

I definitely recommend giving the above a watch to get a clearer idea of child themes and their benefits.

But is it too late to use the custom CSS now? because Ive made so much changes already in the CSS and even some PHP files.. I lost complete overview of the changes.

If you made changes to the theme’s templates (for example, content.php) then you can copy/paste the modified files directly to your child theme’s directory.

CSS is a little trickier to copy over to your child theme after editing your theme’s style.css file. Is it possible you could compare the theme’s original style.css file alongside your modified version and determine the custom CSS that way? Perhaps you could test on the clone of your site that you mentioned in your original question.

Let me know how you get on.

Alright, I’m definitely going to check that talk out and determine from that if I’m going to take the effort/time to make a child theme.

Thanks again ??

Sounds good! You know where to find us if questions come up along the way. ??