SCSS issues

RobLegge
RobLegge used Ask the Experts™
on
SCSS issues. I'm working on a website for a small UK company (something I haven't done for a long while now) who are running this on WordPress and that uses SCSS for the style sheets. The way it was originally designed there's a huge drop down menu system that occupies most of the screen space but, if the browser size is reduced, converts to a mobile setting. The site owners have asked if the code can be changed to always be on the mobile setting. I'm happy with CSS, but have no (or very little) experience with SCSS. I hope someone will be able to help me with the code here. What do I have to strip out, leave or change.

MTIA

Rob

HTML that's generated (from PHP) is
	<nav>
		<div class="inner">
			<ul class="cf cf menu--id-" id="main-navigation">
			<li class="menu-item-8menu-item-type-category">
			      <a href="https://xxxx.com/sheet-music/">Printed Music</a>
				  <div class="mega-menu-container cf"> 
				    <ul>
				      <li class="menu-item-18menu-item-type-category">
					  <a href="https://xxxx.com/sheet-music/sheet-music-sheet-music-piano-keyboard-1/">Piano & Keyboard</a>
					    <div class="mega-menu-container cf"><ul><li class="menu-item-27menu-item-type-category">
						<a href="https://xxxx.com/sheet-music/sheet-music-sheet-music-piano-keyboard-1/piano/">Piano</a>
						[[and lots more like this]]
						</li></ul></div></li></ul>
			<div class="wrapper mobile-menu">
				<div class="container">
					<ul class="shorts cf">
						
					</ul>
					<p><i id="mob-menu" class="fa fa-bars"></i></p>
				</div>
			</div>
		</div>
	</nav>

Open in new window


and the SCSS code is

nav
{
float: left;
width: 100%;
background: white;
text-align: center;
position: relative;

	.inner
	{
	
	}

	ul
	{
	margin: 0;
	}

	.inner > ul  
	{
	display: inline-block;
	position: relative;
	

		> li
		{
		float: left;
		text-transform: uppercase;

		@include sans-serif-bold;

			&:hover
			{
				> a
				{
				color: $colour-primary;
				}

				> .mega-menu-container
				{
					display: block;
					> ul{
						display: flex;
						flex-wrap: wrap;
					}
				}
			}

			> a
			{
			transition: color 300ms;
			padding: $spacing-very-small #{$spacing-very-large / 2};
			float: left;
			}

			&:first-child a
			{
			padding-left: 0;
			}

			&:last-child a
			{
			padding-right: 0;
			}
	

		}
	}

	@include breakpoint($max-w-wrapper) {
		padding-left: $spacing-small;
		padding-right: $spacing-small;

		#main-navigation{
			height:30px;
			li{
				display: none;
			}
		}

		.mobile-menu
		{
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		width: 40px;
		background: white;
		height: 100%;

			.container 
			{
			max-width: none;
			width: 100%;
			height: 100%;

				> p
				{
				padding: 0;
				height: 100%;
				}

				> span
				{
				display: none;
				}

				.fa
				{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				color: black;
				}
			}
		}
	}
}

#main-navigation {
	ul{
		list-style: none;
	}
	margin: 0;
	display: table;
	width: 100%;
	position: relative;
	background: white;
	a, a:visited {
		text-decoration: none;
		font-size: 18px;
	}
	> li {
		display: table-cell;
		text-align: left;
		> a {
			display: block;
			padding: 15px;
			text-align: center;
		}
		&:hover {
			background: #ebebeb;
			 .mega-menu-container {
				display: block;
			}
		}
	}
	.mega-menu-container {
		display: none;
		position: absolute;
		z-index: 9999999;
		background: #ebebeb;
		top: 100%;
		left: 0;
		right: 0;
		> ul {
			padding: 0;
			margin: 20px 50px;
			overflow: hidden;
			> li {
				width: calc((100% / 3) - 2%);
				margin-right: 2%;
				&:nth-of-type(3n){
					margin-right: 0;
				}
				&:nth-child(3n) {
					@include last;
				}
				padding-top: 10px;
				padding-bottom: 10px;
				> a, >a:visited {
					font-size: 21px;
					font-weight: 700;
					line-height: 1;
				}
				.mega-menu-container {
					display: block;
					position: static;
					margin-top: 10px;
					ul {
						padding: 0;
						margin: 0;
						li {
							@include col(1/2);
							&:nth-child(2n) {
								@include last;
							}
							padding: 0;
							border: none;
							> a, >a:visited {
								font-size: 16px;
								line-height: 1;
								font-weight: 300;
								&:hover {
									color: $dk-red;
								}
							}
						}
					}
				}
			}
			.featured-column {
				position: relative;
				p.heading {
					position: absolute;
					z-index: 9;
					top: 40px;
					left: 0;
					right: 0;
					font-size: 40px;
					font-weight: 500;
					line-height: 1.1;
					color: white;
					text-shadow: 0 0 17px rgba(81, 81, 81, 0.5);
					padding: 40px;
				}
			}
		}
	}
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
SCSS should be fairly intuitive if you are familiar with CSS - all it is is a way of expressing styles in a more logical fashion building on existing CSS principles coupled with the ability to use variables, functions and mixins.

In this case it is a fairly simple implementation.

To answer it though I think we might need to see more code (have not studied the code in depth). Usually  there are media queries that set break points between when the main menu is shown and the mobile menu.

In your code that is happening around line 70 you are including a mixin called breakpoint which passes a value $max-w-wrapper. I suspect that the value assigned to $max-w-wrapper is what you are looking for. I am guessing if you find the definition for that and up the value to a screen size below which you want to see the mobile menu it might be enough to solve your issue.

I would need to see more of the SCSS code to be sure though.

Author

Commented:
Hi Julian,

As far as the SCSS goes that's the entire content of the _nav.scss file
In the _settings.scss  $max-w-wrapper is shown as

$max-w-wrapper: max-width $wrapper-width;
$max-w-largest: max-width 1000px;
$max-w-large: max-width 730px;
$max-w-medium: max-width 380px;

Open in new window


There's a folder named Responsive which contains 4 sub-folders where 4 specific screen sizes are identified (there are files inside but all, while named, are blank) and an _init.scss which contains several blocks of the form

	@media only screen and ( max-width : 480px ) {
		//.container { max-width: 320px; }
		@import "max-480/site-shared";
		@import "max-480/mobile-menu";
		@import "max-480/header";
		@import "max-480/homepage";
		@import "max-480/product";
		@import "max-480/footer";
		@import "max-480/category";
		@import "max-480/wordpress";
		@import "max-480/wordpress";
		@import "max-480/cart";
		@import "max-480/checkout";
		@import "max-480/customer";
		@import "max-480/contact";

Open in new window


I suspect these are actually irrelevant.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Do you not have the code for the breakpoint mixin?

@mixin breakpoint( ... )

Open in new window

Author

Commented:
Bit of a red herring I think since the reference to in in style.scss is
@import "vendor/breakpoint/breakpoint

Open in new window

and so refers only to the e-commerce stuff.

R
Commented:
I'm going to close this as I've found a piece of code that may be more effective at doing this. I will need some help with that but will submit the question in the appropriate forum.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial