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 {
				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;
			}
		}

		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: 1em 0;
		ul {
			display: inline-block;
			li {
				padding: 0.5em 0;
			}
		}
		a {
			text-transform: uppercase;
		}
	}


	
	/* begin of menu-hidden */
	.toogle-secondary-navigation .show-mobile{
		display:inherit;
	}
	.toogle,
	.toogled-menu {
		display: none;
	}
	.toogle:checked+.toogled-menu{
		display: block;
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100vh;
		margin-top: 0;
		padding: 7em 4em 0 4em;
		background-color: $color__white;
	}
	.toogle-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;
	}
	.toogle-show::before {
		content: "";
		position: absolute;
		top: 0.3em;
		left: 0;
		width: 100%;
		border-top: 0.3em solid $color__black;
	}
	.toogle-hide {
		display: flex;
		justify-content: center;
	}
	.toogle-hide::after{
		content: "x";
		padding: 0;
		font-size: 3rem;
		font-weight: bold;
	}
	/* end of menu hidden*/

	/* Small menu. */
	.menu-toggle,
	.main-navigation.toggled ul {
		display: block;
	}
}
@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;
		}
		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;
		}
		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;
		}
	}
	.secondary-navigation {
		padding: 1.5em 0;
	}
	/* 
	 * css menu toogler 
	 * */
	.toogle-secondary-navigation .show-mobile,
  .toogle-secondary-navigation .hide-not-mobile{
    display: none;
  }
	.toogled-menu {
		display: inherit;
	}
  /* end css menu toogler 
	 * */
}

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

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

	.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 {
		.toogle-sidebar-segona .show-mobile,
		.toogle-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;
		}
	}
}