oficinasuport-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%;
			padding: 0 0.5rem;
			text-decoration: none;
			font-size: 1rem;
		}

		.current_page_item > a,
		.current-menu-item > a,
		.current_page_ancestor > a,
		.current-menu-ancestor > a {
			font-weight: bold;
			font-family: $font__bold;
			border-left: 1px solid $color__black;
		}
	}

	.main-navigation {
		a[href^="http://localhost"],
		a[href^="http://oficinasuport.xarxaprod.cat"],
		a[href^="https://oficinasuport.xarxaprod.cat"]
		{
			font-family: $font__bold;
			border-left: 1px solid $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;
		background-color: $color__white;
	}
	.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*/

	/* Small menu. */
	.main-navigation.toggled {
		ul {
			display: block;
		}
		.main-navigation-content {
			display: inline-block;
			position: absolute;
			top: 5rem;
			left: 0;
			width: 100%;
			height: calc(100vh - 5rem);
			padding: 3rem;
			background-color: $color__white;
		}
	}
	.menu-toggle {
		display: inline-block;
		width: 10rem;
		height: 4rem;
		margin: 0;
		padding: 0;
		font-size: 0;
		border: none;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
}
@media screen and (max-width: 47.99em) {
	.site-branding {
		display: block;
		width: 0px;
		height: 0px;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	.main-navigation-content {
		text-transform: uppercase;
		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;

			ul {
				background-color: $color__white;
				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;
				}

				li {

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

				a {
					width: 200px;
				}

				:hover > a,
				.focus > a {
				}

				a:hover,
				a.focus {
				}
			}

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

		a {
			padding: 0 0.5rem;
		}
		.current_page_item > a,
		.current-menu-item > a,
		.current_page_ancestor > a,
		.current-menu-ancestor > a {
			border-left: none;
		}
	}
	.main-navigation { 
		padding-bottom: 1em;
		ul {
			justify-content: end;
      ul.sub-menu {
        flex-direction: column;
        padding-top: 2rem;
        padding-left: 1rem;
        padding-bottom: 1rem;
        li {
          margin: 0.5rem 0;
        }
      }
		}
		a[href^="http://localhost"],
		a[href^="http://oficinasuport.xarxaprod.cat"],
		a[href^="https://oficinasuport.xarxaprod.cat"]
		{
			font-family: $font__bold;
			border-left:none;
		}
		a[href^="http://localhost"]::after,
		a[href^="http://oficinasuport.xarxaprod.cat"]::after,
		a[href^="https://oficinasuport.xarxaprod.cat"]::after,
		.current-menu-item a::after {
			display: inline-block;
			content: "";
			position: absolute;
			left: 5%;
			min-height: 2px;
			height: 100%;
			width: 90%;
			margin-top: 2.3em;
			border-bottom: 0.3rem solid $color__black;
		}
    .menu-item-has-children {
			ul {
      }
  	}
	}
	.secondary-navigation {
		padding: 1.5em 0;
	}
	.menu-item-has-children {
		&::after {
			content: "";
			display: inline-block;
			position: absolute;
			top: 40%;
			right: 0.3em;
			//vertical-align: middle;
			//margin: -3em 0 0.5em;
			width: 0.3em;
			height: 0.3em;
			border: 1px solid $color__grey-light;
			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;
		a[href^="http://localhost"]::after,
		a[href^="http://oficinasuport.xarxaprod.cat"]::after,
		a[href^="https://oficinasuport.xarxaprod.cat"]::after,
		.current-menu-item a::after {
			margin-top: 5em;
		}
	}
}