Faça o header desaparecer quando o modo de canvas cheia for detectado no navegador (F11)

Para este tipo de pergunta, acho que não há necessidade de mostrar o meu código, mas no caso de haver necessidade de o fazer, vou mostrar meu código.

Aqui está a minha pergunta

Existe alguma maneira de fazê-lo assim que uma parte da minha página desaparece ou ocultá-lo quando o navegador (IT, Firefox, Chrome, Opera, etc.) estiver configurado em Tela cheia (pressionando F11)

Eu configurei um site interno onde eu mostro painéis e eles são exibidos em grandes canvass.

Tudo o que eu quero é a página para detectar se o navegador está em canvas cheia, se assim quiser, eu quero encabeçar (inclui logotipo + Menu de Navegação) para ocultar e reaparecer quando o navegador é encerrado no modo de canvas cheia.

EDIT: aqui está um exemplo de código da imagem exibida abaixo

/*---------------- Default styles---------------- */ * { margin: auto; outline: 0; padding: 0; border: 0; text-decoration: none; vertical-align: baseline; } html { font-size: 75%; } body { font-family: Verdana, Geneva, sans-serif; font-size: 1rem; background-color: #f7f7f7; width: 100%; overflow-y: scroll; } /*----------------Header Styles----------------*/ header { width: 80%; text-align: center; } header img { padding-top: 3%; padding-bottom: 3%; } /*------------------SUB MENU STYLE-----------------*/ #wrapper { width: 100%; margin: 20% auto; text-align: left; } #nav ul { background-color: #ffd800; list-style-type: none; padding: 0; margin: 0; } #nav ul li { display: inline-block; } #nav ul li:hover { background-color: #6FC4D5; /*Borders*/ border-radius: 5%; -moz-border-radius: 5%; -webkit-border-radius: 5%; border: 0px solid #000; } #nav ul li a, visited { display: block; padding: 15px; color: #000; font-weight: bold; text-decoration: none; } #nav ul li:hover > ul { display: block; } #nav ul ul { display: none; position: absolute; background-color: #e8e4e4; min-width: fill-available; } #nav ul ul li { display: block; } #nav ul ul li:hover { background-color: #6FC4D5; } #nav ul li:hover ul li a, visited { color: Black; font-weight: 500; } #nav ul ul li:hover > ul { display: block; } #nav ul ul ul { margin-top: -21%; width: 100%; margin-left: 100%; background-color: #e8e4e4; } /* Dropdown Menu Arrow */ #nav ul li > a:after { color: #000; font-style: normal; content: '▾'; } #nav ul li > a:hover:after { color: #444; content: '▸'; } #nav ul li > a:only-child:after { content: ' '; } #nav ul li ul li > a:after { color: #000; font-style: normal; content: '▸'; } #nav ul li ul li > a:hover:after { color: #444; content: '▾'; } #nav ul li ul li > a:only-child:after { content: ' '; } /*----------------Article Style----------------*/ article { width: 80%; margin-top: 0%; margin-bottom: 5%; text-align: center; } #hr h1 { padding-top: 0%; padding-bottom: 0; } article h1 { margin-top: 5%; font-size: 2em; text-align: center; } article p { width: auto; text-align: left; font-size: 100%; margin: 3% 0%; padding: 0% 10% 0% 10%; } article p img { margin: 1% 5%; padding-left: 19.5%; padding-right: 19.5%; width: 50%; } /*----------------PDF File view----------------*/ object { padding-top: 5%; width: 60%; height: 1070px; } #pdfsideview embed { padding-top: 5%; width: 65%; height: 730px; } iframe { width: 100%; height: 1070px; } caption { padding: 5% 0% 5% 0%; font-size: 2rem; font-weight: bold; } table { width: 70%; border-collapse: collapse; border-spacing: 0; } #dialing table { width: 100%; } table, th, td { border-collapse: collapse; border-spacing: 0; } th { height: auto; text-align: left; } th, th:hover { background-color: #f7f7f7; } td { text-align: left; height: auto; } tr:hover { background-color: #6FC4D5; /*Borders*/ border-radius: 3%; -moz-border-radius: 3%; -webkit-border-radius: 3%; border: 0% solid #000; width: auto; } 
         
Dialing Codes
Feature Code
All: Call Flow Toggle *28
All: Time Condition Override *27
Asterisk General Call Pickup *8
Call Forward All Activate *72
Call Forward All Deactivate *73
Call Forward All Prompting Activate *720
Call Forward All Prompting Deactivate *74
Call Forward Busy Activate *90
Call Forward Busy Deactivate *91
Call Forward Busy Prompting Activate *900
Call Forward Busy Prompting Deactivate *92
Call Forward No Answer/Unavailable Activate *52
Call Forward No Answer/Unavailable Deactivate *53
Call Forward No Answer/Unavailable Prompting Activate *520
Call Forward Toggle *740
Call Waiting - Activate *70
Call Waiting - Deactivate *71
Camp-On Cancel *83
Camp-On Request *82
Camp-On Toggle *84
ChanSpy 555
Check Recording *99
Dial Voicemail *98
Direct Dial Prefix *
DND Activate *78
DND Deactivate *79
DND Toggle *76
Email completed dictation *35
Findme Follow Toggle *21
In-Call Asterisk Attended Transfer *2
In-Call Asterisk Toggle Call Recording ##
Intercom prefix *80
My Voicemail *97
Park Prefix *86
Perform dictation *34
Phonebook dial-by-name directory 411
Pickup ParkedCall Prefix *85
Queue Callers *47
Save Recording *77
Set user speed dial *75
Speeddial prefix *0
User Intercom Allow *54
User Intercom Disallow *55
ZapBarge 888

Abaixo está um exemplo da minha página. insira a descrição da imagem aqui

Usando a API de canvas cheia em navegadores da web

O usuário poderia, por exemplo, sair em canvas cheia, algo que pode ser bom para você saber. Para isso, temos um evento fullscreenchange , que você pode aplicar tanto ao elemento que solicitou canvas cheia, como também ao documento. Então, apenas detectamos o estado da canvas cheia e agimos em conformidade, assim:

 document.addEventListener("fullscreenchange", function () { fullscreenState.innerHTML = (document.fullscreen)? "" : "not "; }, false); document.addEventListener("mozfullscreenchange", function () { fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not "; }, false); document.addEventListener("webkitfullscreenchange", function () { fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not "; }, false); document.addEventListener("msfullscreenchange", function () { fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not "; }, false); 

SRC: http://robertnyman.com/2012/03/08/using-the-fullscreen-api-in-web-browsers/

Se ao menos você não tivesse mencionado o Opera na sua pergunta, você poderia ter conseguido isso com CSS puro, sem precisar de nenhum JavaScript, usando a pseudo-class de :fullscreen . Infelizmente, embora o Opera ainda não o suporte, o IE apenas o apresentou na v11. Verifique a tabela de suporte total em caniuse.com .

Veja como você faria isso:

 header:-moz-full-screen{ display:none; } header:-moz-fullscreen{ display:none; } header:-ms-fullscreen{ display:none; } header:-webkit-full-screen{ display:none; } header:-webkit-fullscreen{ display:none; } header:fullscreen{ display:none; }