eventListener działa na komputerze a na telefonie nie

Siemka,

Mam stronę internetową i header z menu z motywu OceanWP. Linki z menu w moim skrypcie js mają przypisane eventListenery na click. Wszystko działa ale kiedy menu zamieni się w rozwijane menu to już nie działa. Tak jak bym nie mógł przypisać eventListener do żadnej opcji rozwijanego menu. Kiedy wyłączę menu rozwijane i opcje menu są rozsypane to na małym ekranie linki działają więc chodzi tutaj na pewno o rozwijane menu.

Bardzo proszę o pomoc bo już tyle z tym walczę i dalej nic.

document.addEventListener('DOMContentLoaded', function () {
	//Prevent translating tittle
	const siteLogo=document.querySelector('#site-logo');
	siteLogo.classList.add('notranslate');
	//Header
	const mainSection = document.querySelector('#glowna');
	mainSection.style.display="block";
	const portfolioHeader = document.querySelector('#portfolio-header'); 
	const portfolioContent=document.querySelector('#portfolio-content');
	const portfolioContent2=document.querySelector('#portfolio-content2');
	const aboutSection=document.querySelector("#about");
	const contactSection=document.querySelector("#contact");
	//Portfolio sekcje
	const artystyczneSection=document.querySelector('#artystyczne-section');
	const eventySection=document.querySelector("#eventy-section");
	const plenerySection=document.querySelector("#plenery-section");
	const portretySection=document.querySelector("#portrety-section");
	const sensualSection=document.querySelector("#sensual-section");
	const studioSection=document.querySelector("#studio-section");
	//Portfolio linki
	const artystyczneLink=document.querySelector('#artystyczne-link');
	const eventyLink=document.querySelector("#eventy-link");
	const pleneryLink=document.querySelector("#plenery-link");
	const portretyLink=document.querySelector("#portrety-link");
	const sensualLink=document.querySelector("#sensual-link");
	const studioLink=document.querySelector("#studio-link");
	//Portfolio back links
	const back1=document.querySelector("#portfolio-back-link1");
	const back2=document.querySelector("#portfolio-back-link2");
	const back3=document.querySelector("#portfolio-back-link3");
	const back4=document.querySelector("#portfolio-back-link4");
	const back5=document.querySelector("#portfolio-back-link5");
	const back6=document.querySelector("#portfolio-back-link6");
		const tabSections=document.querySelectorAll('.tab-section');

		const sectionsDissapear = ()=>{
		tabSections.forEach((element)=>{
			element.style.display='none';
		});
	};

	  //Header
		const mainLink=document.querySelector('.site-title.site-logo-text');
		const portfolioLink = document.querySelector('a[href="#portfolio"]'); 
		const aboutLink=document.querySelector('a[href="#about"]');
		const contactLink=document.querySelector('a[href="#contact"]');
		
	mainLink.addEventListener('click',(e)=>{
			e.preventDefault();
			sectionsDissapear();
			mainSection.style.display="block";
		});
	//Portfolio 
	const portfolio=(e)=>{
		e.preventDefault();
		sectionsDissapear();
		portfolioHeader.style.display="block";
		portfolioContent.style.display='flex';
		portfolioContent2.style.display='flex';
	};
	portfolioLink.addEventListener('click',portfolio);
	aboutLink.addEventListener('click',(e)=>{
			e.preventDefault();
			sectionsDissapear();
			aboutSection.style.display="block";
		});
	contactLink.addEventListener('click',(e)=>{
			e.preventDefault();
			sectionsDissapear();
			contactSection.style.display="block";
		});
	artystyczneLink.addEventListener('click',()=>{
		sectionsDissapear();
		artystyczneSection.style.display="block";
	});
	eventyLink.addEventListener('click',()=>{
		sectionsDissapear();
		eventySection.style.display="block";
	});
	pleneryLink.addEventListener('click',()=>{
		sectionsDissapear();
		plenerySection.style.display="block";
	});
	portretyLink.addEventListener('click',()=>{
		sectionsDissapear();
		portretySection.style.display="block";
	});
	sensualLink.addEventListener('click',()=>{
		sectionsDissapear();
		sensualSection.style.display="block";
	});
	studioLink.addEventListener('click',()=>{
		sectionsDissapear();
		studioSection.style.display="block";
	});
});

Jakbyś pokazał stronę to łatwiej by było załapać co jest nie tak. Bo to może być wiele przyczyn a w pytaniu nie ma pełnego kodu ani przykładu html.

Tj. na Androidzie czy iOS nie działa?

Generalnie nie działa przy zmniejszeniu rozmiaru ekranu. To nie musi być na telefonie po prostu nie mogę złapać żadnej opcji w rozwijanym menu
Strona: macringredka.com

Z tego, co widzę, to masz osobne elementy w menu dla szerokiego ekranu i dla wąskiego ekranu.

Natomiast tutaj:

document.querySelector('a[href="#about"]');

łapiesz tylko jeden z tych elementów.

natomiast możesz użyć querySelectorAll

 document.querySelectorAll('a[href="#about"]').forEach(el => {
  el.addEventListener('click',(e)=>{
	e.preventDefault();
	sectionsDissapear();
	aboutSection.style.display="block";
  });
});

coś takiego powinno zadziałać.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

LukeJL napisał(a):

Z tego, co widzę, to masz osobne elementy w menu dla szerokiego ekranu i dla wąskiego ekranu.

Natomiast tutaj:

document.querySelector('a[href="#about"]');

łapiesz tylko jeden z tych elementów.

natomiast możesz użyć querySelectorAll

 document.querySelectorAll('a[href="#about"]').forEach(el => {
  el.addEventListener('click',(e)=>{
	e.preventDefault();
	sectionsDissapear();
	aboutSection.style.display="block";
  });
});

coś takiego powinno zadziałać.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

działa jak trzeba dzięki wielkie