Problem z menu (RWD)

Question

Cześć, właśnie tworzę moją stronę i mam problem z RWD menu.

Czy ktoś mi może powiedzieć dlaczego menu RWD (poniżej 700px) nie działa?

http://sourcestudio.pl/

Answer 1

Jak nie działa? Działa tylko zamiast menu jest znak do rozwijania, po kliknięciu ujrzysz menu

EDIT:

Czy ty nie zadawałeś takiego samego tematu 3 h temu? xD

Comments

Tak to ja zadałem pytanie 3h   

Menu działa, ale linki w tym RWD menu nie działają. Chodzi o to, że kiedy kliknę na

"kontakt" to nie przenosi mnie na ten element na stronie. 

Answer 2

Pozbądź się wpierw wszystkich błędów na stronie 

https://validator.w3.org/nu/?doc=http%3A%2F%2Fsourcestudio.pl%2F

i dopiero później męcz ludzi na forum.

Comments

Ło kurde 326 błędów xD Rekordzista xD

Answer 3

1. Skrypty JS wrzucaj przez </body>

2. Wyrzuć ten skrypt który odpowiada za smooth scroll do anchor linków. Skoro już korzystasz z jquery, to po co ładować jakieś dodatkowe skrypty kiedy można ten efekt uzyskać w samym JQ bardzo prosto.

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

W menu - <a class="a_class" id="link1" href="#ID_SEKCJI_DO_KTOREJ_CHCESZ_ZJECHAC">Home</a>

np.  <a class="a_class" id="link1" href="#home">Home</a>

 

O błędach nie będę się rozpisywał, bo jest ich od groma.

Comments

Konkretnie to 326

---

No wiesz każdemu może zdarzyć się błąd 

---

Zrobiłem tak jak poleciłeś, ale nadal linki w menu (RWD) nie działają.

---

Validator w3c sprawdzi tylko składnię i nieprawidłowości w outline'nie strony. Poza tym sypię błędem przy każdym znaku, który nie pasuje mu do składni - człowiek podsumowałby błędy w jednej linijce jako jeden błąd. Także w rzeczywistości jest ich znacznie mniej.

Druga sprawa validator nie wykryje większości błędów dostępności i sporej części tych dotyczących semantyki. Wiec z tym sugerowaniem się liczbą błędów wywaloną przez validator to bym radził uważać.

---

To jest bardzo dziwne, bo kiedy usunąłem menu na PC to menu RWD działa?  

Cały kod menu 

<nav class="nawigacja">
			<ul class='ul_class'>
				
							
				<li class='li_class'>
					  <a  class="a_class" id="link1" href="#">Home</a>
        		</li>
				
				<li class='li_class'>
					  <a class="a_class" id="link2" href="#">Projekty</a>
				</li>
				
				<li class='li_class'>
					  <a class="a_class" id="link3" href="#">Kontakt</a>
        		</li>
			
			</ul>	
		</nav>
	
  	<header>	
<!-- Początek menu RWD -->		

<div id="nav-icon">
    <span><i class="fa fa-bars"></i></span>
</div>
 
<div class="left-menu">
    <ul>
        <li>
            <a id="link1" href="#">O mnie</a>
        </li>
        <li>
            <hr>
        </li>
        <li>
           <a id="link2" href="#">Moje projekty</a>
        </li>
        <li>
            <hr>
        </li>
        <li>
            <a  id="link3" href="#">Kontakt</a>
        </li>
</div>
	
<!--- Koniec - menu RWD ---->	

 

Menu RWD działa, bez kodu na menu na PC

<!-- Początek menu RWD -->		

<div id="nav-icon">
    <span><i class="fa fa-bars"></i></span>
</div>
 
<div class="left-menu">
    <ul>
        <li>
            <a id="link1" href="#">O mnie</a>
        </li>
        <li>
            <hr>
        </li>
        <li>
           <a id="link2" href="#">Moje projekty</a>
        </li>
        <li>
            <hr>
        </li>
        <li>
            <a  id="link3" href="#">Kontakt</a>
        </li>
</div>
	
<!--- Koniec - menu RWD ---->	

 

---

Spróbuj nadać osobne ID linkom dla desktop i mobile, może jest jakiś konflikt. W końcu duplikujesz ID.

I można to menu napisać bez konieczności duplikowania linków na wersji desktop i mobile co też polecam zrobić :)

---

Dziękuje pomogło :D