Please disregard the 'View article...' shown at the bottom of many posts as this is the result of restoring old forum posts from a backup.

Toggle nav

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...
«134

Comments

  • 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...
  • 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...
  • 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...
  • 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...
  • 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...
  • 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...
  • 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...
  • Tried this, but nothing..


    View article...
  • 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'.
  • 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">
  • 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.
  • 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..
  • 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"
  • 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
  • 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.
  • 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?
  • 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'.
  • 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">
  • 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.
  • 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..
  • 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
  • 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.
  • 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?
  • 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'.
  • 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">
  • 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.
  • 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..
Sign In or Register to comment.