Custom SCSS

talk to the storefront customer support if you paid for any storefront products in the woocommerce website.

Hi @jpb10,

I’m not sure why the Additional CSS section isn’t working, but for this minor tweak I would think that is a great use of the Additional CSS section.

Would you mind sharing the code you were attempting to use, or just in general what you are after with the span between site-branding and secondary-navigation.

Thanks for the responses.

I have a relatively long title, eg. “yet another wordpress & woocommerce site”. When I don’t use the secondary menu, everything looks fine.

When I do use the secondary menu (for “My Account” and instagram link), the title squishes to 2 or 3 lines, depending on the window width.

Without secondary menu:

.woocommerce-active {
		.site-header {
			.site-branding {
				@include span(9 of 12);
[...]
}

With secondary menu:

.storefront-secondary-navigation {
[...]
&.woocommerce-active {
			.site-header {
				.site-branding {
					@include span(3 of 12);
				}
				.secondary-navigation {
					@include span(6 of 12);
[...]
}

I would like to be able to manage the span widths of site-branding and secondary-navigation.

• This reply was modified 5 years, 9 months ago by jpb10.
• This reply was modified 5 years, 9 months ago by jpb10.

In summary, I would like to change the span values of site-branding and secondary-navigation from 3+6 to something like 6+3, in order to accommodate for my long title.

Hi @jpb10,

I’m sorry I glossed over this earlier. Looking at your example/sample SCSS you are trying to use it dawned on me that the Additional CSS section in WordPress doesn’t work with SCSS/SASS/LESS, etc… It takes good ol’ plain CSS.

It makes more sense now why you asked the best way to add SCSS to Storefront. ??

You mentioned you are using a child theme. In that setup I think it would be best to use a code editor and its add-on libraries if needed to have it create a compiled style.css stylesheet.

So you can still create a simple style.scss stylesheet, and then use some sort of compiler that translates that to a style.css file. That would work great in your child theme and code editor of choice. Does that make sense?

No problem!

That confirms my suspicion… I will look into that option.

Thanks

@jpb10,

Best of luck! My current preferred editor is Atom, and I know it has packages made for compiling SCSS if that helps any. ??