Bootstrap – problem s "active" linkem v menu + nezabaluje se po kliknutí na položku v mobilu

5. 12. 2014 18:39:03

Dobrý den,

prosím o radu. Na stránkách: http://demo.kybernaut.cz/vrananska mám šablonu nakódovanou na jedné Bootstrap šabloně. Všechno funguje perfektně, ale "active" link v menu nefunguje v Chromu (ale ve FF ano) a na mobilu se po kliknutí na položku v menu menu nezbalí, absolutně netuším, kde je chyba (do daných částí jsem nezasahovala), neuměl byste mi prosím někdo pomoct? Sedím nad tím už pěkně dlouho... Prostě jako kdyby Chrome tu "active" class v menu nepřipsal a neodebral, tj. problém s javascriptem...

(Je to moje první jedno stránková šablona na bootstrapu).

zobrazování navigace (na mojí stránce)

<body <?php body_class(); ?> data-spy="scroll" data-target=".navbar">
<nav id="topnav" class="navbar navbar-fixed-top navbar-default" role="navigation">
  <div class="container">
	  
	  <div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
		  <span class="sr-only">Toggle navigation</span>
		  <span class="icon-bar"></span>
		  <span class="icon-bar"></span>
		  <span class="icon-bar"></span>
		</button>
		<a href="<?php echo site_url(); ?>">
			 <?php if (ot_get_option( 'logo_menu', false) != false) : ?>
                <img src='<?php echo ot_get_option( 'logo_menu'); ?>' class="navbar-brand"/>
             <?php else : ?>
                <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/img/logo.png" alt="Logo" class="navbar-brand"/>
             <?php endif; ?>
        </a>
	  </div>

<div class="collapse navbar-collapse navbar-ex1-collapse">
                    <?php wp_nav_menu( array(
							'menu'              => 'primary',
							'theme_location'    => 'primary',
							'container'         => '',
							'container_class'   => '',
							'container_id'      => '',
							'menu_class'        => 'nav navbar-nav',
							'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
							'walker'            => new wp_bootstrap_navwalker())
						);
					?>
	</div>
  </div>
</nav>

zde je z původní šablony:

<body data-spy="scroll" data-target=".navbar">
<nav id="topnav" class="navbar navbar-fixed-top navbar-default" role="navigation">
		<div class="container">
	  
	  <div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
		  <span class="sr-only">Toggle navigation</span>
		  <span class="icon-bar"></span>
		  <span class="icon-bar"></span>
		  <span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">BootScroller BS 3.0.</a>
	  </div>

<div class="collapse navbar-collapse navbar-ex1-collapse">
		<ul class="nav navbar-nav">
		    <li class="active"><a href="#top-section">Home</a></li>
			<li><a href="#Section-1">Section-1</a></li>
			<li><a href="#Section-2">Section-2</a></li>
			<li><a href="#Section-3">Section-3</a></li>
			<li><a href="#foot-sec">Footer</a></li>
		</ul>
		<div class="nav navbar-nav navbar-right">
		   <a class="btn btn-danger navbar-btn" style="margin-left:10px;">Sign up</a>
		   <a class="btn btn-success navbar-btn">Sign in</a>
		</div>
	</div>
	</div>
</nav>

Pokud správně hledám, tak přiřazování "active" probíhá zde (celý soubor ke stažení tady:

collapsing menu tady:

5. 12. 2014 18:39:03

https://webtrh.cz/diskuse/bootstrap-problem-s-active-linkem-v-menu-nezabaluje-se-po-kliknuti-na-polozku-v-mobilu#reply1074147

JKHouba

(1 hodnocení)

5. 12. 2014 22:49:48

Nemělo by to css být se složenými závorkami a dvojtečkou? Číslo funguje i bez apostrofů (uvozovek).

Už dneska špatně vidím, takže jsem to mohl přehlédnout, nemohu nikde dohledat tu třídu "in" ...

Jinak na to čučím jak vrána,v FF je vidět, že třída "active" se přidává a odebírá, kdežto v Chrome zůstává stále u poslední položky. Je to fakt divný, to zas bude nějaká "ptákovina". Taky nemůžu najít důvod, proč by to nemělo chodit.

5. 12. 2014 22:49:48

https://webtrh.cz/diskuse/bootstrap-problem-s-active-linkem-v-menu-nezabaluje-se-po-kliknuti-na-polozku-v-mobilu#reply1074146

kybernaut.cz

(12 hodnocení)

6. 12. 2014 21:30:56

Ahoj, díky za snahu, zkusím to, ale myslím, že těma závorkama to není. No, právě, fakt to nechápu. Oboje bude nějaká volovina, ale problém je, že je to poslední věc, která chybí, termín hoří a já s tím prostě neumím pohnout...

6. 12. 2014 21:30:56

https://webtrh.cz/diskuse/bootstrap-problem-s-active-linkem-v-menu-nezabaluje-se-po-kliknuti-na-polozku-v-mobilu#reply1074145

JKHouba

(1 hodnocení)

6. 12. 2014 23:03:54

Už se chytám každý blbosti..

Nemáš tam něco speciál pro chrome jestli se to netříská?

Tady asi třeba např. chybí středník na konci, se mi zdá..

Zajímavý, že to běhá i na různých verzích IE, jen to Chrome zlobí.

6. 12. 2014 23:03:54

https://webtrh.cz/diskuse/bootstrap-problem-s-active-linkem-v-menu-nezabaluje-se-po-kliknuti-na-polozku-v-mobilu#reply1074144

kybernaut.cz

(12 hodnocení)

7. 12. 2014 00:59:29

Středník přidán, ale nepomohlo to (každopádně díky!)

7. 12. 2014 00:59:29

https://webtrh.cz/diskuse/bootstrap-problem-s-active-linkem-v-menu-nezabaluje-se-po-kliknuti-na-polozku-v-mobilu#reply1074143

vpixle

(3 hodnocení)

14. 12. 2014 19:09:09

Ahoj,

pokud neni sablona upytlacena, tak nejlepe s tim umi pomoct autor ;)

Myslim (hadam), ze se ti tam pere scrollTo a scrollSpy. Jednou jsem na to u Bootstrapu taky narazil (chyba taky jenom v Chrome).

Tehdy to myslim vyresila novejsi verze jQery; mimochodem tu do stranek nahravas nekolikrat (OK WP ji nahrava), takze nikdo netusi, co se vlastne vykonava.

Nastav si nejake breakpointy do toho SrollSpy-je, a zkus to nejak odkrokovat, jestli se vubec vykonava (a jak).

V tech minimalizovanych scriptech se neda cist, takze takhle na dalsku ti asi vic nepomuzem.

14. 12. 2014 19:09:09

https://webtrh.cz/diskuse/bootstrap-problem-s-active-linkem-v-menu-nezabaluje-se-po-kliknuti-na-polozku-v-mobilu#reply1074142

kybernaut.cz

(12 hodnocení)

15. 12. 2014 17:48:15

Ahoj,

šablona není upytlačená, ale je moje, takže autor sám si s ní neví rady. Autor původní šablony v HTML (bootstraptor.com) nemá kontakt na stránkách, na Twitteru a tom emailu, co byl přibalený v licenci k HTML šabloně, ale každopádně díky za nasměrování. Zkusím zjistit, jaktože se to tam nahrává víckrát a zajistit nějakou novější verzi.

Kdyby ses chtěl podívat na neminimalizované skripty, tak klidně pošlu, ale fakt nevím, čím to je (a už se do toho dívalo dost lidí a na nic jsme nepřišli)

Zdraví

15. 12. 2014 17:48:15

https://webtrh.cz/diskuse/bootstrap-problem-s-active-linkem-v-menu-nezabaluje-se-po-kliknuti-na-polozku-v-mobilu#reply1074141

vpixle

(3 hodnocení)

17. 12. 2014 00:29:51

Napsal Karolína Vyskočilová;1150183
Ahoj,
šablona není upytlačená, ale je moje, takže autor sám si s ní neví rady. Autor původní šablony v HTML (bootstraptor.com) nemá kontakt na stránkách, na Twitteru a tom emailu, co byl přibalený v licenci k HTML šabloně, ale každopádně díky za nasměrování. Zkusím zjistit, jaktože se to tam nahrává víckrát a zajistit nějakou novější verzi.

Kdyby ses chtěl podívat na neminimalizované skripty, tak klidně pošlu, ale fakt nevím, čím to je (a už se do toho dívalo dost lidí a na nic jsme nepřišli)

Zdraví
K.

Ja asi nebudu ten pravej. Ja s jQuery tak slouho zapasil, az sem utekl k Angularu (programator ma psat o objektech ne o nejakym priblblym DOMu ;) Priznam se, ze jsem to nijak zazracne nezkoumal, ale v tve strance jsem nenasel misto kde bys ten scrollSpy vlastne inicializovala. Kdyz neni zapnutej, tak nesleduje, ktera cast je zrovna zobrazena a samozrejme nezmeni classy v topmenu.

JavaScript · Bootstrap

Hodne stesti pri hledani.

P.S. Stranka natahuje kvanta JS, kterej nevyuzivas (nicescroll, parallax), ale je tam a muze skodit. Problemy s jQuery rostou s se ctvercem LOC.

17. 12. 2014 00:29:51

https://webtrh.cz/diskuse/bootstrap-problem-s-active-linkem-v-menu-nezabaluje-se-po-kliknuti-na-polozku-v-mobilu#reply1074140

Pro odpověď se přihlašte.

Přihlásit