Top navbar menu has incorrect styles when using Sparkling child theme

Sparkling
1

I’ve installed the Sparkling theme and it works fine. But when I try to use a child theme based on it, then the top navbar menu looks wrong - it appears to have some of the mobile-width menu styles. I haven’t added any CSS to the child theme.

Attached are screenshots of the menu with the default Sparkling theme, and when I’ve switched to a new child theme based on it. I’ve also attached a screenshot of the Inspector, focusing on the first li element in the navbar (“Home”).

I’m using WordPres 5.2.2 and have deactivated all plugins.

2

Hey there

Can you please provide link to your website?
Also, why you use a child theme? are you going to edit theme functions and files?

3

My website isn’t live.

Here’s the contents of my child theme: Sparkling WordPress theme, child · GitHub

I’m using a child theme because I might want to edit theme functions, and also like to keep CSS changes in git (in the child theme’s CSS file).

4

Good morning

I need to see live website to investigate the problem, when do you plan to make it live?

5

Hi,

A friend has the same problem - I was trying to solve it for him by looking at a clean, minimal install. His site is at https://www.tedmills.com

6

Good morning

Sorry, but website is not loading, I have this message:

This site can’t provide a secure connection www.tedmills.com uses an unsupported protocol.
ERR_SSL_VERSION_OR_CIPHER_MISMATCH

7

Oh, sorry! It doesn’t have SSL: http://www.tedmills.com

8

Hey there

This is a normal menu, what is the problem here? there is no rectangle style like you explained it in your first message.
Can be fixed by CSS but I need to see it live :slight_smile:

9

Hello,
I have a similar problem but with the sparkling theme and also my child theme. The Top navbar menu does not display properly on Edge (windows) or Opera (MACOSX) but correctly with the other explorer on both system. It’s like the explorer use the mobile menu.
I use WP 5.2.3 and have deactivated also all plugins, I have deleted all the cache, the CDN.
The website : https://www.advy.org but i have the same problem on local

Thank You for help,
Laurenay

10

Hi,
I understand the problem, you used :focus-within in CSS for the navbar class and it is not supported by IE or Edge. For Opera I did update it and now the problem has disappeared.

11

Hello @laurenay

I see your problem is now resolved, can you please confirm?
your website is working in IE and in edge

12

Hello,
Because :focus-within is a pseudo class that IE and Edge doesn’t understand it ignores the entire rule block. I have splited the rules into two blocks so Edge and IE only ignore the block it doesn’t understand. Now my website is working in IE and Edge, but the theme should be updated.

13

Hey there

We will update this, sorry about inconvenience