Bonjour !

J'aimerais changer ou ajouter dynamiquement une classe dans mon code au niveau de ma nav quand la taille de l'écran change !
J'ai une nav qui change de comportement en fonction de la taille de l'écran.

Voici le js qui gère le comportements de la nav avec le scroll :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
window.onscroll = function(){
    if (document.documentElement.scrollTop > 40){
      document.getElementById("headbar").style.boxShadow = "0px 4px 50px 0px rgba(0,0,0,0.75)";
      document.getElementById("headbar").style.position = "fixed";
      document.getElementById("head_menu").style.position = "fixed";
    }else{
        document.getElementById("headbar").style.boxShadow = "none";
        document.getElementById("headbar").style.position = "relative";
        document.getElementById("head_menu").style.position = "absolute";
    }
}
Le souci avec ce code c'est qu'il est bien pour le format smartphone et tablette car le menu de ma navigation reste bien en place mais au format desktop, cela pose un souci avec la ligne

Code : Sélectionner tout - Visualiser dans une fenêtre à part
document.getElementById("head_menu").style.position = "fixed";
J'ai trouvé sur le net la méthode matchMédia, mais j'ai pas trop saisie la manière de l'utiliser...

Voici le reste de mon code (c'est du wordpress):
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<header id="main_head" class="main_header">
			<div id="headbar" class="headbar">
				<div class="logoCR">
					<?php if(!is_front_page()){?>
						<a href="<?php echo home_url(); ?>">
					<?php } ?>
						<img src="<?= get_stylesheet_directory_uri();?>/pics/COL-CPIAS.png" alt="logo" width="50"/>
					</a>
				</div>
				<div class="log_seek">				
					<?php echo do_shortcode('[ivory-search id="201" title="Default Search Form"]'); ?>
				</div>
			</div>
			<nav id="navbar" class="main_nav">
				<button aria-expanded="false" aria-controls="main-menu" class="togle">Menu</button>
				<?php 
                                wp_nav_menu(
                                        [
                                                'theme_location'=>"header_nav",
                                                'items_wrap'    =>'<ul id="head_menu" class="head_menu" hidden>%3$s</ul>'
                                        ]
                                );
                                ?>
			</nav>
       	</header>

JS :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
const toggleMenu = document.querySelector('.main_nav button');
const menu = document.querySelector('#head_menu');
 
toggleMenu.addEventListener('click', function() {
  const open = JSON.parse(toggleMenu.getAttribute('aria-expanded'));
  toggleMenu.setAttribute('aria-expanded', !open);
  menu.hidden = !menu.hidden;
});
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
.main_header{
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 5px;
}
.headbar{
    grid-column: span 12;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    z-index: 10;
    width: 100%;
    top: 0;
    background: red;
}
.main_nav{
    display: flex;
    flex-direction: column;
    grid-column: span 12;
    z-index: 10;
}
.togle{
    position: fixed;
    top: 12.5%;
    left: 3%;
    width: 4rem;
    height: 2.4rem;
    padding: 1rem 0;
    transition: .3s;
    font: 0/0 a;
    text-shadow: none;
    border: 0;
    color: transparent;
    background-color: var(--bluenavy);
    background-clip: content-box;
}
.togle::before,
.togle::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: .4rem;
    background-color: var(--bluenavy);
    transition: .3s;
    transform-origin: left;
}
.togle::before{
    top: 0;
}
.togle::after{
    bottom: 0;
}
.togle[aria-expanded=true]{
    background-color: rgba(0,0,0,0);
}
.togle[aria-expanded=true]::before {
    transform: translate(.5rem, -.375rem) rotate(45deg);
}
.togle[aria-expanded=true]::after {
    transform: translate(.5rem, .375rem) rotate(-45deg);
}
.head_menu{
    display: flex;
    flex-direction: column;
    transform: translateX(-110%);
    margin-top: 4rem !important;
    transition: .3s;
    position: absolute;
    width: 100%;
    top: 12rem;
}
.head_menu:not([hidden]){
    transform: translateX(0);
}
.head_menu li{
    height: 5rem;
    background-color: var(--blueeth);
    transition: all 300ms ease-in-out;
    display: flex;
    align-items: center;
    margin: 0.1rem;
    justify-content: center;
}
.head_menu li a{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    text-decoration: none;
    color: white;
    margin: 0;
    padding: 0;
}

Merci