Jekyll and Bootstrap: Nav menu on mobile only toggles, doesn't select menu items

0

Our nav menu has three levels, like so:

When the site is viewed on mobile, the menu collapses into a hamburger button. When clicked/touched it will display the top level menu items but touching any of those just hides the menu. I've Googled and haven't found much to help me out, some old post from 2012 where the suggestion was to hack the js and one on SO where the poster had tags not closed and mixed quotes (' ") type of errors. I've checked my code and I don't think I have any of those issues. I am building the menus with Liquid but I don't think that would have anything to do with it. Here's the raw code:

<nav class="navbar navbar-default navbar-fixed-top">



<div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">

        <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="/index.html"><img src="/assets/images/logos/prebid_final.png"></a>

    </div>



    <!-- Collect the nav links, forms, and other content for toggling -->

    <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-right">



            {% for item in site.data.dropdowns %}



            <li class="dropdown">



                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

                    {{ item.sectionName }}

                    <span class="caret" />

                </a> 



                <ul id="prebidDropDown" class="dropdown-menu">



                    {% for submenu in item.submenus %}



                    <li class="dropdown dropdown-submenu">

                        <a href="{{submenu.link}}">{{ submenu.title }}



                            {% if submenu.hasBubblePopOut == 1 %}

                                <span class="caret" />

                            {% endif %}

                        </a>



                        {% if submenu.hasBubblePopOut == 1 %}



                            <ul class="dropdown-menu">



                                {% for bubblePopOut in submenu.bubble %}



                                    <li><a href="{{bubblePopOut.link}}">{{bubblePopOut.title}}</a></li>



                                {% endfor %}



                            </ul>

                        {% endif %}

                    </li>



                    {% endfor %}

                </ul>



            </li>



            {% endfor %}



            <!-- end loop through top level nav-->   

        </ul>

        <!--end top level menu items-->         

    </div>

    <!--end navbar-->

</div>

<!--end container-->

I can post the output html (it's pretty long).

And my navbar css:

    /* NavBar */



.navbar { 

    z-index:100

    font-family: 'Dosis', sans-serif;

}



.navbar-default {

  background-color: #FFFFFF;

  border-color: transparent;

  padding-top: 15px;

}



.navbar-default .navbar-brand {

  color: white;

}



.navbar-default .navbar-nav>li>a {

  color: #3498db;

  font-weight: 500;

  font-size: 24px;



}



.navbar-toggle {

  background: #fff;

}



.navbar-brand img { 

    max-width: 200px;

    max-height: 35px;

}



.navbar-brand{

    float:left;

    height:50px;

    padding:10px 15px;

    font-size:18px;

    line-height:20px}



/* DropDown*/



.dropdown-submenu {

  position: relative;

}

.dropdown-submenu > .dropdown-menu {

  top: 0;

  left: 100%;

  margin-top: -6px;

  margin-left: -1px;

}

.dropdown-submenu:hover > .dropdown-menu {

  display: block;

}

.dropdown-submenu:hover > a:after {

  border-left-color: #fff;

}

.dropdown-submenu.pull-left {

  float: none;

}

.dropdown-submenu.pull-left > .dropdown-menu {

  left: -100%;

  margin-left: 10px;

}

I'm probably missing something, would appreciate any help.

css twitter-bootstrap mobile jekyll liquid

share|improve this question

asked Nov 20 '18 at 18:58

PruitIgoePruitIgoe

2,8151250105

add a comment | 

0

Our nav menu has three levels, like so:

When the site is viewed on mobile, the menu collapses into a hamburger button. When clicked/touched it will display the top level menu items but touching any of those just hides the menu. I've Googled and haven't found much to help me out, some old post from 2012 where the suggestion was to hack the js and one on SO where the poster had tags not closed and mixed quotes (' ") type of errors. I've checked my code and I don't think I have any of those issues. I am building the menus with Liquid but I don't think that would have anything to do with it. Here's the raw code:

<nav class="navbar navbar-default navbar-fixed-top">



<div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">

        <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="/index.html"><img src="/assets/images/logos/prebid_final.png"></a>

    </div>



    <!-- Collect the nav links, forms, and other content for toggling -->

    <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-right">



            {% for item in site.data.dropdowns %}



            <li class="dropdown">



                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

                    {{ item.sectionName }}

                    <span class="caret" />

                </a> 



                <ul id="prebidDropDown" class="dropdown-menu">



                    {% for submenu in item.submenus %}



                    <li class="dropdown dropdown-submenu">

                        <a href="{{submenu.link}}">{{ submenu.title }}



                            {% if submenu.hasBubblePopOut == 1 %}

                                <span class="caret" />

                            {% endif %}

                        </a>



                        {% if submenu.hasBubblePopOut == 1 %}



                            <ul class="dropdown-menu">



                                {% for bubblePopOut in submenu.bubble %}



                                    <li><a href="{{bubblePopOut.link}}">{{bubblePopOut.title}}</a></li>



                                {% endfor %}



                            </ul>

                        {% endif %}

                    </li>



                    {% endfor %}

                </ul>



            </li>



            {% endfor %}



            <!-- end loop through top level nav-->   

        </ul>

        <!--end top level menu items-->         

    </div>

    <!--end navbar-->

</div>

<!--end container-->

I can post the output html (it's pretty long).

And my navbar css:

    /* NavBar */



.navbar { 

    z-index:100

    font-family: 'Dosis', sans-serif;

}



.navbar-default {

  background-color: #FFFFFF;

  border-color: transparent;

  padding-top: 15px;

}



.navbar-default .navbar-brand {

  color: white;

}



.navbar-default .navbar-nav>li>a {

  color: #3498db;

  font-weight: 500;

  font-size: 24px;



}



.navbar-toggle {

  background: #fff;

}



.navbar-brand img { 

    max-width: 200px;

    max-height: 35px;

}



.navbar-brand{

    float:left;

    height:50px;

    padding:10px 15px;

    font-size:18px;

    line-height:20px}



/* DropDown*/



.dropdown-submenu {

  position: relative;

}

.dropdown-submenu > .dropdown-menu {

  top: 0;

  left: 100%;

  margin-top: -6px;

  margin-left: -1px;

}

.dropdown-submenu:hover > .dropdown-menu {

  display: block;

}

.dropdown-submenu:hover > a:after {

  border-left-color: #fff;

}

.dropdown-submenu.pull-left {

  float: none;

}

.dropdown-submenu.pull-left > .dropdown-menu {

  left: -100%;

  margin-left: 10px;

}

I'm probably missing something, would appreciate any help.

css twitter-bootstrap mobile jekyll liquid

share|improve this question

asked Nov 20 '18 at 18:58

PruitIgoePruitIgoe

2,8151250105

add a comment | 

0

0

0

Our nav menu has three levels, like so:

When the site is viewed on mobile, the menu collapses into a hamburger button. When clicked/touched it will display the top level menu items but touching any of those just hides the menu. I've Googled and haven't found much to help me out, some old post from 2012 where the suggestion was to hack the js and one on SO where the poster had tags not closed and mixed quotes (' ") type of errors. I've checked my code and I don't think I have any of those issues. I am building the menus with Liquid but I don't think that would have anything to do with it. Here's the raw code:

<nav class="navbar navbar-default navbar-fixed-top">



<div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">

        <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="/index.html"><img src="/assets/images/logos/prebid_final.png"></a>

    </div>



    <!-- Collect the nav links, forms, and other content for toggling -->

    <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-right">



            {% for item in site.data.dropdowns %}



            <li class="dropdown">



                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

                    {{ item.sectionName }}

                    <span class="caret" />

                </a> 



                <ul id="prebidDropDown" class="dropdown-menu">



                    {% for submenu in item.submenus %}



                    <li class="dropdown dropdown-submenu">

                        <a href="{{submenu.link}}">{{ submenu.title }}



                            {% if submenu.hasBubblePopOut == 1 %}

                                <span class="caret" />

                            {% endif %}

                        </a>



                        {% if submenu.hasBubblePopOut == 1 %}



                            <ul class="dropdown-menu">



                                {% for bubblePopOut in submenu.bubble %}



                                    <li><a href="{{bubblePopOut.link}}">{{bubblePopOut.title}}</a></li>



                                {% endfor %}



                            </ul>

                        {% endif %}

                    </li>



                    {% endfor %}

                </ul>



            </li>



            {% endfor %}



            <!-- end loop through top level nav-->   

        </ul>

        <!--end top level menu items-->         

    </div>

    <!--end navbar-->

</div>

<!--end container-->

I can post the output html (it's pretty long).

And my navbar css:

    /* NavBar */



.navbar { 

    z-index:100

    font-family: 'Dosis', sans-serif;

}



.navbar-default {

  background-color: #FFFFFF;

  border-color: transparent;

  padding-top: 15px;

}



.navbar-default .navbar-brand {

  color: white;

}



.navbar-default .navbar-nav>li>a {

  color: #3498db;

  font-weight: 500;

  font-size: 24px;



}



.navbar-toggle {

  background: #fff;

}



.navbar-brand img { 

    max-width: 200px;

    max-height: 35px;

}



.navbar-brand{

    float:left;

    height:50px;

    padding:10px 15px;

    font-size:18px;

    line-height:20px}



/* DropDown*/



.dropdown-submenu {

  position: relative;

}

.dropdown-submenu > .dropdown-menu {

  top: 0;

  left: 100%;

  margin-top: -6px;

  margin-left: -1px;

}

.dropdown-submenu:hover > .dropdown-menu {

  display: block;

}

.dropdown-submenu:hover > a:after {

  border-left-color: #fff;

}

.dropdown-submenu.pull-left {

  float: none;

}

.dropdown-submenu.pull-left > .dropdown-menu {

  left: -100%;

  margin-left: 10px;

}

I'm probably missing something, would appreciate any help.

css twitter-bootstrap mobile jekyll liquid

share|improve this question

asked Nov 20 '18 at 18:58

PruitIgoePruitIgoe

2,8151250105

Our nav menu has three levels, like so:

When the site is viewed on mobile, the menu collapses into a hamburger button. When clicked/touched it will display the top level menu items but touching any of those just hides the menu. I've Googled and haven't found much to help me out, some old post from 2012 where the suggestion was to hack the js and one on SO where the poster had tags not closed and mixed quotes (' ") type of errors. I've checked my code and I don't think I have any of those issues. I am building the menus with Liquid but I don't think that would have anything to do with it. Here's the raw code:

<nav class="navbar navbar-default navbar-fixed-top">



<div class="container-fluid">



    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">

        <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="/index.html"><img src="/assets/images/logos/prebid_final.png"></a>

    </div>



    <!-- Collect the nav links, forms, and other content for toggling -->

    <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-right">



            {% for item in site.data.dropdowns %}



            <li class="dropdown">



                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

                    {{ item.sectionName }}

                    <span class="caret" />

                </a> 



                <ul id="prebidDropDown" class="dropdown-menu">



                    {% for submenu in item.submenus %}



                    <li class="dropdown dropdown-submenu">

                        <a href="{{submenu.link}}">{{ submenu.title }}



                            {% if submenu.hasBubblePopOut == 1 %}

                                <span class="caret" />

                            {% endif %}

                        </a>



                        {% if submenu.hasBubblePopOut == 1 %}



                            <ul class="dropdown-menu">



                                {% for bubblePopOut in submenu.bubble %}



                                    <li><a href="{{bubblePopOut.link}}">{{bubblePopOut.title}}</a></li>



                                {% endfor %}



                            </ul>

                        {% endif %}

                    </li>



                    {% endfor %}

                </ul>



            </li>



            {% endfor %}



            <!-- end loop through top level nav-->   

        </ul>

        <!--end top level menu items-->         

    </div>

    <!--end navbar-->

</div>

<!--end container-->

I can post the output html (it's pretty long).

And my navbar css:

    /* NavBar */



.navbar { 

    z-index:100

    font-family: 'Dosis', sans-serif;

}



.navbar-default {

  background-color: #FFFFFF;

  border-color: transparent;

  padding-top: 15px;

}



.navbar-default .navbar-brand {

  color: white;

}



.navbar-default .navbar-nav>li>a {

  color: #3498db;

  font-weight: 500;

  font-size: 24px;



}



.navbar-toggle {

  background: #fff;

}



.navbar-brand img { 

    max-width: 200px;

    max-height: 35px;

}



.navbar-brand{

    float:left;

    height:50px;

    padding:10px 15px;

    font-size:18px;

    line-height:20px}



/* DropDown*/



.dropdown-submenu {

  position: relative;

}

.dropdown-submenu > .dropdown-menu {

  top: 0;

  left: 100%;

  margin-top: -6px;

  margin-left: -1px;

}

.dropdown-submenu:hover > .dropdown-menu {

  display: block;

}

.dropdown-submenu:hover > a:after {

  border-left-color: #fff;

}

.dropdown-submenu.pull-left {

  float: none;

}

.dropdown-submenu.pull-left > .dropdown-menu {

  left: -100%;

  margin-left: 10px;

}

I'm probably missing something, would appreciate any help.

css twitter-bootstrap mobile jekyll liquid

css twitter-bootstrap mobile jekyll liquid

share|improve this question

asked Nov 20 '18 at 18:58

PruitIgoePruitIgoe

2,8151250105

share|improve this question

asked Nov 20 '18 at 18:58

PruitIgoePruitIgoe

2,8151250105

share|improve this question

share|improve this question

asked Nov 20 '18 at 18:58

PruitIgoePruitIgoe

2,8151250105

asked Nov 20 '18 at 18:58

PruitIgoePruitIgoe

2,8151250105

asked Nov 20 '18 at 18:58

PruitIgoePruitIgoe

2,8151250105

2,8151250105

add a comment | 

add a comment | 

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399767%2fjekyll-and-bootstrap-nav-menu-on-mobile-only-toggles-doesnt-select-menu-items%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

active

oldest

votes

active

oldest

votes

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399767%2fjekyll-and-bootstrap-nav-menu-on-mobile-only-toggles-doesnt-select-menu-items%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here