Header met nav volledig mobiel

Code

HTML

<?php $custom_logo_id = get_theme_mod( ‘custom_logo’ );

$logo = wp_get_attachment_image_src( $custom_logo_id , ‘full’ );

if ( has_custom_logo() ) {

echo ‘<img src=”‘ . esc_url( $logo[0] ) . ‘” alt=”‘ . get_bloginfo( ‘name’ ) . ‘”>’;

} else {

echo ‘<h1>’ . get_bloginfo(‘name’) . ‘</h1>’;

}?>

</a>

</button>

</button>

<?php wp_nav_menu(array(’theme_location’ => ‘hoofdmenu’,’depth’ => 2,’container’ => false,’menu_class’ => ‘nav navbar-nav navbar-right’,’walker’ => new wp_bootstrap_navwalker())); ?>

</div>

</nav>

</header>

CSS

/*HEADER*/

header{
position:fixed;
width:100%;
z-index:100;
}

/*fillspace to prevent content from getting under the header when on top of page /

witruimte om te voorkomen dat content onder de header valt*/

.h-whtsp{
height:60px;
}

/*NAVBAR*/

nav{
position:fixed;
width:100%;
background-color:black;
z-index:1000;
}

nav.navbar{
position:relative;
justify-content:space-between;
}

/*navbar logo*/

nav .navbar-brand img{
width:165px;
}

/*mobile menu / responsive menu / tablet menu*/

/*hamburger icon menu toggler / hamburger icoon menu toggler*/

nav .navbar-toggler-icon span{
display:grid;
height:2px;
margin:5px 2px;
right:0px;
border-radius:5px;
background-color: red;
}

/*inside menu toggler / Binneste menu toggler*/

nav .collapse .toggle-inside .navbar-toggler-icon{
position: relative;
display: flex;
height: 30px;
width: 30px;
flex-direction: column;
justify-content: center;
}

/*inside menu toggler close button objects / binneste menu toggler dichtdoen knop objecten*/

nav .collapse .toggle-inside .navbar-toggler-icon::before,
nav .collapse .toggle-inside .navbar-toggler-icon::after{
content: ”;
position: absolute;
height: 2px;
width: 100%;
background-color: red;
}

/*rotate object to get the X shape / roteer object om de X vorm te krijgen*/

nav .collapse .toggle-inside .navbar-toggler-icon::before{
transform: rotate(45deg);
}

nav .collapse .toggle-inside .navbar-toggler-icon::after{
transform: rotate(-45deg);
}

/*inside toggler placement / binneste toggle plaatsing*/

nav .header-menu .header-collapse .toggle-inside{
position:absolute;
top:20px;
right:16px;
z-index:1050;
}

/*the open menu area for mobiel. it’s why it fills the whole screen / uitgeklapte menu mobiel. dit is waarom het de gehele scherm vult*/

nav .header-menu .header-collapse{
position:fixed;
height:100%;
width:100%;
top:0;
right:0;
left:0;
bottom:0;
object-fit: fill;
flex:1;
background-color:black;
z-index:1000;
}

/*turn off cluncky transition / zet onhandige transitie uit */

nav .header-menu .header-collapse.collapsing{
transition:none!important;
}

/*menu items in het midden zetten en scroll mogelijk maken*/

nav .header-menu .collapse-screen{
width:100%;
height:100%;
display:flex;
justify-content:center;
overflow-y:auto;
}

nav .header-menu .header-collapse .collapsed-nav-wrap{
width:100%;
height:inherit;
}

/*place menu items in a smaller container so accedently pressing the sides won’t klik you to a page./

menu items in een kleiner formaat zodat je er niet random op klikt */

nav .header-menu .header-collapse #menu-hoofdmenu{
width:300px;
padding:80px 0px 80px 0px;
margin-left:auto;
margin-right:auto;
}

/*menu items*/

nav .header-menu .header-collapse #menu-hoofdmenu li a{
color:red;
font-family:”Open-Sans”;
text-transform:uppercase;
text-align:center;
letter-spacing:1px;
}

/*add effects when active / voeg effecten toe wanneer actief*/

nav .header-menu .header-collapse #menu-hoofdmenu li.active > a{
color:yellow;
}

/*add effects when hover / voeg effecten toe wanneer je met je muis over heen gaat*/

nav .header-menu .header-collapse #menu-hoofdmenu li a:hover{
color:lime;
}

/*the dropdown menu*/

nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu{
padding-top:0px;
padding-bottom:0px;
margin-left:13px;
border:none;
border-radius:0px;
}

/*dropdowm menu items anchor*/

nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu a{
color:red;
}

/*add effects to dropdowm menu items when active / voeg effecten toe aan dropdown menu items */

nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li.active a,
nav .header-menu .header-collapse #menu-hoofdmenu.active a.dropdown-toggle{
color:lime;
}

/*add hover effect to dropdown menu item / voeg hover effecten toe aan dropdown menu items*/

nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu a:hover{
background-color:pink;
}

/*large breakpoint / laptop / lg / min-width: 992px*/

@media only screen and (min-width: 992px){

/*NAVBAR*/

/*menu van mobiel naar desktop modus*/

nav.navbar{
flex-direction:row;
padding:0px;
}

/*brand image wrap */

nav .navbar-brand{
padding-top:0px;
padding-bottom:0px;
}

/*brand image width / logo breedte*/

nav .navbar-brand img{
width:477px;
}

/**/

nav .header-menu .header-collapse{
background-color:transparent;
position:relative;
height:auto;
width:auto;
top:0;
right:0;
bottom:0;
left:0;
z-index:1000;
}

/*turns off overflow so dropdowns work correctly / zet overflow uit zodat dropdowns correct werken*/

nav .header-menu .collapse-screen{
overflow:unset;
}

/*menu*/

nav .header-menu .header-collapse #menu-hoofdmenu{
position:relative;
min-height:auto;
width:100%;
padding:0px;
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:auto;
}

/*menu items*/

nav .header-menu .header-collapse #menu-hoofdmenu li{
}

/*add hover effects on menu item / voeg hover effecten toe aan menu item*/

nav .header-menu .header-collapse #menu-hoofdmenu li:hover{
background-color:black;
}

/*add effects to menu items anchors when active / voeg effecten toe menu item ankers wanneer actief*/

nav .header-menu .header-collapse #menu-hoofdmenu li.active > a{
border-bottom:2px solid red;
}

/*menu items anchors / menu item ankers*/

nav .header-menu .header-collapse #menu-hoofdmenu li a{
padding:12px 18px!important;
margin-right:0px!important;
margin-left:0px!important;
font-size:16px;
}

/*add hover effect to menu item anchors / voeg hover effecten toe aan menu item ankers*/

nav .header-menu .header-collapse #menu-hoofdmenu li a:hover{
}

/*add menu item decoration / voeg menu item decoraties toe*/

nav .header-menu .header-collapse #menu-hoofdmenu li:before{
content:””;
position:absolute;
width:calc(100% – 10px);
bottom:0;
left:5px;
}

/*add effect on decoration on hover / voeg effecten toe aan menu item decoraties op hover*/

nav .header-menu .header-collapse #menu-hoofdmenu li:hover:before{
}

/*add menu item decoration to active an element / voeg menu item decoraties toe aan een actieve element*/

nav .header-menu .header-collapse #menu-hoofdmenu li.active:before{
}

/*dropdowns*/

/*add effect to active menu dropdown toggler / voeg effecten toe aan een actieve menu dropdown toggler*/

nav .header-menu .header-collapse #menu-hoofdmenu li.active a.dropdown-toggle{
}

/*dropdown menu*/

nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu{
}

/*dropdown menu item*/

nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li{
background-color:darkgrey;
}

/*add effects to active dropdown menu item / voeg effecten toe aan actieve dropdown menu items*/

nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li.active a{
}

/*add hover effects to dropdown items / voegt hover effecten op dropdown items*/

nav .header-menu .header-collapse #menu-hoofdmenu li .dropdown-menu a:hover{
}

/*add decoration to a dropdown menu item / voegt decoraties toe aan dropdown menu item*/

nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li:before{
content:none;
}

/*add decoration to a dropdown menu item / voegt decoratie toe aan dropdown menu items*/

nav .header-menu .header-collapse #menu-hoofdmenu .dropdown-menu li.active:before{
content:none;
}

}

/*extra large breakpoint / desktop / xl min-width: 1200px*/

@media only screen and (min-width: 1200px){

/*places navbar more to the center*/

nav.navbar{
justify-content:space-between;
}
}

Uitleg

Met deze header krijg je bij de mobiele navigatie een volledig gevulde menu over het scherm.