Toggle nav

eVenster

Hi,

I've made a onepage website using http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/, but on mobile devices the menu doesn't toggle in Exponent. The scrolling nav index calls for a
. On the live preview it turns to
, but not in 2.3.1.
Any idea what's going on?


View article...

dleffler

I don't understand what you mean by the 'period' turns into a 'comma'? (was that a forum parsing problem?). Is the 'toggle' you refer to the main menu toggle? What 'view' are you using to create this one-page menu, a custom view, or hard-coding it inline within the subtheme template? What patch if any are you using?

I have a non-production one-page menu working, but it's all hard-coded and uses jquery.nav.js and jqueryScrollTo.js.


View article...

eVenster

Hi,

Forum deleted my html I see..
Mobile view get this:
div class="navbar-collapse navbar-ex1-collapse collapse in" aria-expanded="true" style="" (i've deleted the <>, hope that works)

Exponent keeps the
div class="collapse navbar-collapse navbar-ex1-collapse"
as in the index

I'm using the latest patch (4, if i'm correct) and i've hardcoded the menu in a subtheme


View article...

dleffler

I'll assume this is a bootstrap3 based theme? I'm still not following what the issue is...the 'in' class is auto-controlled by the bootstrap 'collapse.js' script to show whether the menu, etc... is open or closed. What you show above seems to place the 'id' inside the class instead of as an id? e.g., shouldn't it be
div class="navbar-collapse collapse in" id="navbar-ex1-collapse" aria-expanded="true" style=""

And this all assumes the 'button' you have defined earlier in the code has a data-target="navbar-ex1-collapse" along with the proper type="button" class="navbar-toggle" and data-toggle="collapse"


View article...

eVenster

Yes, it's a bootstrap3 theme. That is exactly what the problem is: the script doesn't work: the button/menu does not open. The button has the correct data-target and class. Developer tools doesn't give an error..


View article...

dleffler

Sorry, but can you confirm you have the
id="navbar-ex1-collapse" in the collapse-navbar element? If you do and it's not appearing the in the html output, you may be missing or mis-matching quotes around the 'id'? Again, it sounds as if the 'data-toggle' name in the button and the 'id' in the navbar are not the same (or are not enclosed in quotes properly)...in fact, if the rest of that element attributes are missing, it is likely an ending quote missing.


View article...

eVenster

this is what i've got in het index: (removed only the <'s)<br />nav class="navbar navbar-default navbar-fixed-top" role="navigation">
div class="container">
div class="navbar-header page-scroll">
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 page-scroll" href="#page-top">HOME/a>
/div>

div class="collapse navbar-collapse navbar-ex1-collapse">

ul class="nav navbar-nav">


View article...

dleffler

It looks like this 2nd line from the bottom above
div class="collapse navbar-collapse navbar-ex1-collapse">
must be changed to
div class="collapse navbar-collapse" id="navbar-ex1-collapse">
the 'id' seems to be merged into the 'class' therefore the collapse 'button' won't work since it's trying to collapse a menu with the ID (not class) of 'navbar-ex1-collapse'.


View article...

eVenster

Tried this, but nothing..


View article...

eVenster

Tried this, but nothing..

dleffler

It looks like this 2nd line from the bottom above
div class="collapse navbar-collapse navbar-ex1-collapse">
must be changed to
div class="collapse navbar-collapse" id="navbar-ex1-collapse">
the 'id' seems to be merged into the 'class' therefore the collapse 'button' won't work since it's trying to collapse a menu with the ID (not class) of 'navbar-ex1-collapse'.

eVenster

this is what i've got in het index: (removed only the <'s)
nav class="navbar navbar-default navbar-fixed-top" role="navigation">
div class="container">
div class="navbar-header page-scroll">
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 page-scroll" href="#page-top">HOME/a>
/div>

div class="collapse navbar-collapse navbar-ex1-collapse">

ul class="nav navbar-nav">

dleffler

Sorry, but can you confirm you have the
id="navbar-ex1-collapse" in the collapse-navbar element? If you do and it's not appearing the in the html output, you may be missing or mis-matching quotes around the 'id'? Again, it sounds as if the 'data-toggle' name in the button and the 'id' in the navbar are not the same (or are not enclosed in quotes properly)...in fact, if the rest of that element attributes are missing, it is likely an ending quote missing.

eVenster

Yes, it's a bootstrap3 theme. That is exactly what the problem is: the script doesn't work: the button/menu does not open. The button has the correct data-target and class. Developer tools doesn't give an error..

dleffler

I'll assume this is a bootstrap3 based theme? I'm still not following what the issue is...the 'in' class is auto-controlled by the bootstrap 'collapse.js' script to show whether the menu, etc... is open or closed. What you show above seems to place the 'id' inside the class instead of as an id? e.g., shouldn't it be
div class="navbar-collapse collapse in" id="navbar-ex1-collapse" aria-expanded="true" style=""

And this all assumes the 'button' you have defined earlier in the code has a data-target="navbar-ex1-collapse" along with the proper type="button" class="navbar-toggle" and data-toggle="collapse"

eVenster

Hi,

Forum deleted my html I see..
Mobile view get this:
div class="navbar-collapse navbar-ex1-collapse collapse in" aria-expanded="true" style="" (i've deleted the <>, hope that works)

Exponent keeps the
div class="collapse navbar-collapse navbar-ex1-collapse"
as in the index

I'm using the latest patch (4, if i'm correct) and i've hardcoded the menu in a subtheme

dleffler

I don't understand what you mean by the 'period' turns into a 'comma'? (was that a forum parsing problem?). Is the 'toggle' you refer to the main menu toggle? What 'view' are you using to create this one-page menu, a custom view, or hard-coding it inline within the subtheme template? What patch if any are you using?

I have a non-production one-page menu working, but it's all hard-coded and uses jquery.nav.js and jqueryScrollTo.js.

eVenster

Hi,

I've made a onepage website using http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/, but on mobile devices the menu doesn't toggle in Exponent. The scrolling nav index calls for a
. On the live preview it turns to
, but not in 2.3.1.
Any idea what's going on?

eVenster

Tried this, but nothing..

dleffler

It looks like this 2nd line from the bottom above
div class="collapse navbar-collapse navbar-ex1-collapse">
must be changed to
div class="collapse navbar-collapse" id="navbar-ex1-collapse">
the 'id' seems to be merged into the 'class' therefore the collapse 'button' won't work since it's trying to collapse a menu with the ID (not class) of 'navbar-ex1-collapse'.

eVenster

this is what i've got in het index: (removed only the <'s)
nav class="navbar navbar-default navbar-fixed-top" role="navigation">
div class="container">
div class="navbar-header page-scroll">
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 page-scroll" href="#page-top">HOME/a>
/div>

div class="collapse navbar-collapse navbar-ex1-collapse">

ul class="nav navbar-nav">

dleffler

Sorry, but can you confirm you have the
id="navbar-ex1-collapse" in the collapse-navbar element? If you do and it's not appearing the in the html output, you may be missing or mis-matching quotes around the 'id'? Again, it sounds as if the 'data-toggle' name in the button and the 'id' in the navbar are not the same (or are not enclosed in quotes properly)...in fact, if the rest of that element attributes are missing, it is likely an ending quote missing.

eVenster

Yes, it's a bootstrap3 theme. That is exactly what the problem is: the script doesn't work: the button/menu does not open. The button has the correct data-target and class. Developer tools doesn't give an error..

eVenster

Hi,

Forum deleted my html I see..
Mobile view get this:
div class="navbar-collapse navbar-ex1-collapse collapse in" aria-expanded="true" style="" (i've deleted the <>, hope that works)

Exponent keeps the
div class="collapse navbar-collapse navbar-ex1-collapse"
as in the index

I'm using the latest patch (4, if i'm correct) and i've hardcoded the menu in a subtheme

dleffler

I don't understand what you mean by the 'period' turns into a 'comma'? (was that a forum parsing problem?). Is the 'toggle' you refer to the main menu toggle? What 'view' are you using to create this one-page menu, a custom view, or hard-coding it inline within the subtheme template? What patch if any are you using?

I have a non-production one-page menu working, but it's all hard-coded and uses jquery.nav.js and jqueryScrollTo.js.

eVenster

Hi,

I've made a onepage website using http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/, but on mobile devices the menu doesn't toggle in Exponent. The scrolling nav index calls for a
. On the live preview it turns to
, but not in 2.3.1.
Any idea what's going on?

eVenster

Tried this, but nothing..

dleffler

It looks like this 2nd line from the bottom above
div class="collapse navbar-collapse navbar-ex1-collapse">
must be changed to
div class="collapse navbar-collapse" id="navbar-ex1-collapse">
the 'id' seems to be merged into the 'class' therefore the collapse 'button' won't work since it's trying to collapse a menu with the ID (not class) of 'navbar-ex1-collapse'.

eVenster

this is what i've got in het index: (removed only the <'s)
nav class="navbar navbar-default navbar-fixed-top" role="navigation">
div class="container">
div class="navbar-header page-scroll">
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 page-scroll" href="#page-top">HOME/a>
/div>

div class="collapse navbar-collapse navbar-ex1-collapse">

ul class="nav navbar-nav">

dleffler

Sorry, but can you confirm you have the
id="navbar-ex1-collapse" in the collapse-navbar element? If you do and it's not appearing the in the html output, you may be missing or mis-matching quotes around the 'id'? Again, it sounds as if the 'data-toggle' name in the button and the 'id' in the navbar are not the same (or are not enclosed in quotes properly)...in fact, if the rest of that element attributes are missing, it is likely an ending quote missing.

eVenster

Yes, it's a bootstrap3 theme. That is exactly what the problem is: the script doesn't work: the button/menu does not open. The button has the correct data-target and class. Developer tools doesn't give an error..