xarxaprod-wp-theme/sass/components/navigation/_navigation.scss

@media screen {
	.hide-content {
		display: block;
		width: 0px;
		height:0px;
		margin: 0;
		padding:0;
		overflow:hidden;
	}
	.custom-logo {
		min-width: 11rem;
		margin: 1rem;
	}
	.main-navigation,.secondary-navigation {
		ul {
			display: none;
			list-style: none;
			margin: 0;
			padding-left: 0;

      ul.sub-menu {
        padding-top: 0.5rem;
        padding-left: 1rem;
      }
		}
		li {
			position: relative;
			&:hover > a,
			&.focus > a {
			}
		}
		a {
			display: flex;
			align-items: center;
			min-height: 100%;
			text-decoration: none;
			font-size: 1rem;
		}
	}

	.main-navigation {
	  &.toggled {
	  	ul {
	  		display: block;
	  	}
	  	.main-navigation-content {
	  		display: inline-block;
	  		position: absolute;
	  		top: 0;
	  		left: 0;
	  		width: 100%;
	  		height: 100vh;
	  		padding: 4rem;
	  		background-color: rgba(255,255,255,0.95);
	  		overflow: auto;
	  	}
	    .menu-toggle {
	    	position: relative;
	    	z-index: 9999;
	    }
	  	.current-menu-ancestor > a::after {
	  		background-color: transparent;
	  	}
	  	.current-menu-item > a::after {
	  		display: inline-block;
	  		content: "";
	  		position: absolute;
	  		left: 0;
	  		top: 2em;
	  		height: 2px;
	  		width: 100%;
	  		background-color: $color__black;
	  	}
	  }
  }
	.secondary-navigation {
		padding: 0 1em 1em 0;
		ul {
			display: inline-block;
			li {
				padding: 0.5em 0;
			}
		}
		a {
			text-transform: uppercase;
		}
	}
	.menu-item-has-children {
	}

	/* begin of menu-hidden */
	.toggle-secondary-navigation .show-mobile{
		display:inherit;
	}
	.toggle,
	.toggled-menu {
		display: none;
	}
	.toggle:checked+.toggled-menu{
		display: block;
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100vh;
		margin-top: 0;
		padding: 0 2rem;
	}
	.toggle-show {
		position: relative;
		display: inline-block;
		width: 1.8em;
		height: 1.4em;
		margin-right: 0.3em;
		border-top: 0.3em solid $color__black;
		border-bottom: 0.3em solid $color__black;
	}
	.toggle-show::before {
		content: "";
		position: absolute;
		top: 0.3em;
		left: 0;
		width: 100%;
		border-top: 0.3em solid $color__black;
	}
	.toggle-hide {
		display: flex;
		justify-content: end;
		margin-right: -0.5em;
	}
	.toggle-hide::after{
		content: "x";
		padding: 0;
		font-size: 3rem;
		font-weight: bold;
	}
	/* end of menu hidden*/

}
@media screen and (max-width: 47.99em) {
	.site-branding {
	}
	.main-navigation-content {
		li {
			padding: 0.5rem 0; 
		}
	}
	.secondary-navigation-content {
		padding: 4rem 2rem;
	}
}
@media screen and (min-width: 48em) {
	.site-branding {
	}
	.custom-logo {
		min-width: 11rem;
		margin: 1rem 1rem 1rem 0;
	}
	.menu-toggle {
		display: none;
	}

	.main-navigation,.secondary-navigation {
		ul {
			display: flex;
			flex-flow: row;
      .menu-item-has-children > ul {
				background-color: rgba(255,255,255,0.95);
			}
			.sub-menu {
				float: left;
				position: absolute;
				top: 100%;
				left: -999em;
				z-index: 99999;

				ul {
					left: -999em;
					top: 0;
				}

				li {

					&:hover > ul,
					&.focus > ul {
						display: block;
						left: 4em;
						top: 1em;
					}
				}

				a {
					width: 200px;
				}

				:hover > a,
				.focus > a {
				}

				a:hover,
				a.focus {
				}
			}
      li {
			  padding: 0 1em;
        order: 2;
			  &:hover > ul,
			  &.focus > ul {
				  left: auto;
			  }
        &.lang-item {
          order: 1;
        }
			}
		}

	}
	.main-navigation { 
		padding-bottom: 1em;
		ul {
			justify-content: end;
      ul.sub-menu {
        flex-direction: column;
        padding: 0.5rem;
        li {
          margin: 0.5rem 0;
        }
      }
		}
		.current-menu-ancestor > a::after,
		.current-menu-item > a::after {
			display: inline-block;
			content: "";
			position: absolute;
			left: 1em;
			bottom: -0.5em;
			min-height: 2px;
			height: 2px;
			width: calc(100% - 2em);
			background-color: $color__black;
		}
    .menu-item-has-children {
			ul {
      }
  	}
	}
	.secondary-navigation {
		padding: 1.5em 0;
	}
	.menu-item-has-children {
		padding-right: 0.5em;
		&::after {
			content: "";
			display: inline-block;
			position: absolute;
			top: 40%;
			right: 0.3em;
			width: 0.3em;
			height: 0.3em;
			border: 1px solid $color__black;
			border-top: none;
			border-left: none;
			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		&:hover {
			&::after {
				//border-color: $color__grey-dark;
			}
		}
	}
		/* 
		 * css menu toggler 
		 * */
	.toggle-secondary-navigation .show-mobile,
	.toggle-secondary-navigation .hide-not-mobile{
		display: none;
	}
	.toggled-menu {
		display: inherit;
	}
	/* end css menu toggler 
	 * */
}

.comment-navigation,
.posts-navigation,
.post-navigation {

	.site-main & {
		margin: 0 0 1.5em;
		align-self: end;
	}

	.nav-links {
		display: flex;
	}

	.nav-previous {
		flex: 1 0 50%;
	}

	.nav-next {
		//text-align: end;
		flex: 1 0 50%;
	}
}
@media screen and (min-width: 80em) {
	.main-navigation,.secondary-navigation {
		.toggle-sidebar-segona .show-mobile,
		.toggle-sidebar-segona .hide-not-mobile{
			display:none;
		}

		//a {
		//	padding: 0 1rem;
		//}
	}
	.main-navigation {
		padding-bottom: 0;
	}
}