Note: I realize the < li > in the sub menu are transparent. It should be solid off-white, or gray to look like the original.

.main-navigation {
	clear: both;
	display: block;
	float: right;
	width: total_site_width();

	ul {
        float:left;
		list-style: none;
		margin: 0;
		padding: 0 1em;
        li {
            float:left;
            ul{
                padding: $phi * 1rem;
                display: none;
                li ul:hover > li {
                    display:block;
                    left:100%;
                }
            }
            ul {
			box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
			float: left;
			position: absolute;
			top: 100%;
			left: -999em;
			z-index: 99999;

			ul {
				left: -999em;
				/* top: 0; */
				top: 2rem;
				
			}

			li {

				&:hover > ul,
				&.focus > ul {
					display: block;
					left: auto;
				}
			}

			a {
				width: 200px;
			}

			:hover > a,
			.focus > a {
    border-bottom:0.2rem solid red;
			}

			a:hover,
			a.focus {
    border-bottom:0.2rem solid red;
			}
		}

        }

		
		li:hover > ul,
		li.focus > ul {
			left: auto;
		}
	}

	li {
		position: relative;

		&:hover > a,
		&.focus > a {
		}
	}

	a {
		display: block;
		text-decoration: none;
	}

	.current_page_item > a,
	.current-menu-item > a,
	.current_page_ancestor > a,
	.current-menu-ancestor > a {
	}

I guess You could say I started with a SASS tutorial, but abandoned it because I just wanted to dig into this project. There’s not any SASS in this part (though, it’s really cool! I wish I had more time to mess with it! i will continue as I complete this project).

The screenshot attempts to illustrate what I am going for in appearance. What I have (one version)
I also have a version where the sub sub-menu DOES go off to the right, but it’s only the text that’s moving.
What I want it to look like.
My question is:
Can you see anything in that CSS that I’ve done wrong, and what should I focus on to try to achieve what I want?

Thank you!

EDIT:
I meant to stress that I set out to complete a PSD to WP conversion project. I wanted a toturial for the ‘_s’ theme. I found one that I think is really helpful if anyone wants to check it out. There are a LOT out there. Trust me. This is the only one that really spoke to me, isn’t too fast, not too slow. It’s free, and I don’t think you’ll find anything more to the point on YouTube. It is pre FSE, however. It’s really more of a SASS tutorial. The linked URL is where I abandoned it to dive into the project.

Is there any info on why this plugin has been closed as of today? Wondering if there’s cause for concern or whether it’s just a temporary issue.

Hoping the closure isn’t permanent, WP-SCSS is extremely useful.

Thanks.

The CSS you’re using is far too specific, it’s making it bloated to overwrite them.

Instead of having the declaration “.directorist-content-active a” on the body element .. which overwrites every single A element on the website, can you not add classes closer to that which you wish to style.

It’s the “cascade” in the stylesheets you don’t seem to be understanding?

What I want to do is to use Sass to build my style.css file, but being such a noob at this I don’t know where to look for the CSS selectors to target. HTML is used to create the CSS classes, but custom HTML is not used to build Genesis child themes, from how I understand it.

Correct me if I’m wrong, but in Genesis, I wouldn’t create the HTML and therefore I wouldn’t create the CSS classes, right?

From how I understand it, the HTML and CSS classes are auto generated by the Genesis framework engine?

If this is the case, then how do I know which CSS selectors to target?

Thanks for any help I can get!

Notice: Trying to access array offset on value of type null in …/wp-scss/scssphp/src/Compiler.php on line 3705

where can we download sass or sass files for the twentytwenty-Theme?

Regards

I really like this theme, nice work. Are there any plans on integrating Gulp, SASS, etc. into this theme? I think it would be a nice benefit. Or is anybody here who already did this?

Thanks in advance!