Bootstrap 4 Navbar Closing When Icon Tapped

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

When my page is small enough to show the collapsible navbar, you can click or tap the icon and it will open the navbar. BUT if you click or tap it again, it won't close. I am not sure why.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<header>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-2">

            <a href="/mwlas/" class="navbar-brand">

                <img src="/mwlas/_img/logo.png" alt="logo"/>

                <span class="d-none d-sm-block float-right ml-3">Made with Love And Sarcasm</span></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

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

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item">

                        <a href="/mwlas/" class="nav-link">Home</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/portfolio" class="nav-link">Portfolio</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/shop" class="nav-link">Shop</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/blog" class="nav-link">Blog</a>

                    </li>

                </ul>

                <form class="form-inline">

                    <button class="btn btn-outline-success my-2 my-sm-0" type="button"

                            onclick="location.href='/mwlas/login.php'">Login

                    </button>

                </form>

            </div>

        </nav>

    </header>

edited Nov 24 '18 at 3:26

asked Nov 24 '18 at 3:21

Tyler Lazenby

154120

1

I'm not sure if I understood you, but it seems to be working

– Tico
Nov 24 '18 at 3:25

I noticed that in the code snippet too . . . and yet it isn't here madewithloveandsarcasm.com

– Tyler Lazenby
Nov 24 '18 at 3:27

1

Looks like you're importing the scripts more than once. Try fixing this first

– Tico
Nov 24 '18 at 3:31

Thank you very much for suggesting that.

– Tyler Lazenby
Nov 24 '18 at 3:34

1

No problem. It seems to be working now :)

– Tico
Nov 24 '18 at 3:38

|
show 1 more comment

When my page is small enough to show the collapsible navbar, you can click or tap the icon and it will open the navbar. BUT if you click or tap it again, it won't close. I am not sure why.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<header>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-2">

            <a href="/mwlas/" class="navbar-brand">

                <img src="/mwlas/_img/logo.png" alt="logo"/>

                <span class="d-none d-sm-block float-right ml-3">Made with Love And Sarcasm</span></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

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

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item">

                        <a href="/mwlas/" class="nav-link">Home</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/portfolio" class="nav-link">Portfolio</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/shop" class="nav-link">Shop</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/blog" class="nav-link">Blog</a>

                    </li>

                </ul>

                <form class="form-inline">

                    <button class="btn btn-outline-success my-2 my-sm-0" type="button"

                            onclick="location.href='/mwlas/login.php'">Login

                    </button>

                </form>

            </div>

        </nav>

    </header>

edited Nov 24 '18 at 3:26

asked Nov 24 '18 at 3:21

Tyler Lazenby

154120

1

I'm not sure if I understood you, but it seems to be working

– Tico
Nov 24 '18 at 3:25

I noticed that in the code snippet too . . . and yet it isn't here madewithloveandsarcasm.com

– Tyler Lazenby
Nov 24 '18 at 3:27

1

Looks like you're importing the scripts more than once. Try fixing this first

– Tico
Nov 24 '18 at 3:31

Thank you very much for suggesting that.

– Tyler Lazenby
Nov 24 '18 at 3:34

1

No problem. It seems to be working now :)

– Tico
Nov 24 '18 at 3:38

|
show 1 more comment

When my page is small enough to show the collapsible navbar, you can click or tap the icon and it will open the navbar. BUT if you click or tap it again, it won't close. I am not sure why.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<header>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-2">

            <a href="/mwlas/" class="navbar-brand">

                <img src="/mwlas/_img/logo.png" alt="logo"/>

                <span class="d-none d-sm-block float-right ml-3">Made with Love And Sarcasm</span></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

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

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item">

                        <a href="/mwlas/" class="nav-link">Home</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/portfolio" class="nav-link">Portfolio</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/shop" class="nav-link">Shop</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/blog" class="nav-link">Blog</a>

                    </li>

                </ul>

                <form class="form-inline">

                    <button class="btn btn-outline-success my-2 my-sm-0" type="button"

                            onclick="location.href='/mwlas/login.php'">Login

                    </button>

                </form>

            </div>

        </nav>

    </header>

edited Nov 24 '18 at 3:26

asked Nov 24 '18 at 3:21

Tyler Lazenby

154120

When my page is small enough to show the collapsible navbar, you can click or tap the icon and it will open the navbar. BUT if you click or tap it again, it won't close. I am not sure why.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<header>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-2">

            <a href="/mwlas/" class="navbar-brand">

                <img src="/mwlas/_img/logo.png" alt="logo"/>

                <span class="d-none d-sm-block float-right ml-3">Made with Love And Sarcasm</span></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

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

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item">

                        <a href="/mwlas/" class="nav-link">Home</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/portfolio" class="nav-link">Portfolio</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/shop" class="nav-link">Shop</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/blog" class="nav-link">Blog</a>

                    </li>

                </ul>

                <form class="form-inline">

                    <button class="btn btn-outline-success my-2 my-sm-0" type="button"

                            onclick="location.href='/mwlas/login.php'">Login

                    </button>

                </form>

            </div>

        </nav>

    </header>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<header>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-2">

            <a href="/mwlas/" class="navbar-brand">

                <img src="/mwlas/_img/logo.png" alt="logo"/>

                <span class="d-none d-sm-block float-right ml-3">Made with Love And Sarcasm</span></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

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

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item">

                        <a href="/mwlas/" class="nav-link">Home</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/portfolio" class="nav-link">Portfolio</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/shop" class="nav-link">Shop</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/blog" class="nav-link">Blog</a>

                    </li>

                </ul>

                <form class="form-inline">

                    <button class="btn btn-outline-success my-2 my-sm-0" type="button"

                            onclick="location.href='/mwlas/login.php'">Login

                    </button>

                </form>

            </div>

        </nav>

    </header>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<header>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-2">

            <a href="/mwlas/" class="navbar-brand">

                <img src="/mwlas/_img/logo.png" alt="logo"/>

                <span class="d-none d-sm-block float-right ml-3">Made with Love And Sarcasm</span></a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

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

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item">

                        <a href="/mwlas/" class="nav-link">Home</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/portfolio" class="nav-link">Portfolio</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/shop" class="nav-link">Shop</a>

                    </li>

                    <li class="nav-item">

                        <a href="/mwlas/blog" class="nav-link">Blog</a>

                    </li>

                </ul>

                <form class="form-inline">

                    <button class="btn btn-outline-success my-2 my-sm-0" type="button"

                            onclick="location.href='/mwlas/login.php'">Login

                    </button>

                </form>

            </div>

        </nav>

    </header>

css bootstrap-4

edited Nov 24 '18 at 3:26

asked Nov 24 '18 at 3:21

Tyler Lazenby

154120

edited Nov 24 '18 at 3:26

asked Nov 24 '18 at 3:21

Tyler Lazenby

154120

edited Nov 24 '18 at 3:26

asked Nov 24 '18 at 3:21

Tyler Lazenby

154120

asked Nov 24 '18 at 3:21

Tyler Lazenby

154120

asked Nov 24 '18 at 3:21

Tyler Lazenby

154120

1

I'm not sure if I understood you, but it seems to be working

– Tico
Nov 24 '18 at 3:25

I noticed that in the code snippet too . . . and yet it isn't here madewithloveandsarcasm.com

– Tyler Lazenby
Nov 24 '18 at 3:27

1

Looks like you're importing the scripts more than once. Try fixing this first

– Tico
Nov 24 '18 at 3:31

Thank you very much for suggesting that.

– Tyler Lazenby
Nov 24 '18 at 3:34

1

No problem. It seems to be working now :)

– Tico
Nov 24 '18 at 3:38

|
show 1 more comment

1

I'm not sure if I understood you, but it seems to be working

– Tico
Nov 24 '18 at 3:25

I noticed that in the code snippet too . . . and yet it isn't here madewithloveandsarcasm.com

– Tyler Lazenby
Nov 24 '18 at 3:27

1

Looks like you're importing the scripts more than once. Try fixing this first

– Tico
Nov 24 '18 at 3:31

Thank you very much for suggesting that.

– Tyler Lazenby
Nov 24 '18 at 3:34

1

No problem. It seems to be working now :)

– Tico
Nov 24 '18 at 3:38

I'm not sure if I understood you, but it seems to be working

– Tico
Nov 24 '18 at 3:25

I noticed that in the code snippet too . . . and yet it isn't here madewithloveandsarcasm.com

– Tyler Lazenby
Nov 24 '18 at 3:27

Looks like you're importing the scripts more than once. Try fixing this first

– Tico
Nov 24 '18 at 3:31

Thank you very much for suggesting that.

– Tyler Lazenby
Nov 24 '18 at 3:34

No problem. It seems to be working now :)

– Tico
Nov 24 '18 at 3:38

|
show 1 more comment

1 Answer
1

active

oldest

votes

Looking at the source code of your page, you were importing the scripts (jQuery, popper and bootstrap.js) twice.

That led to some issues/conflicts. Make sure you import exactly as the Getting started guide describes

Import the scripts only once and the problem should disappear.

answered Nov 24 '18 at 3:45

Tico

2,15322533

add a comment |

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
});

}
});

draft saved

draft discarded

Sign up or log in

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

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454893%2fbootstrap-4-navbar-closing-when-icon-tapped%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Looking at the source code of your page, you were importing the scripts (jQuery, popper and bootstrap.js) twice.

That led to some issues/conflicts. Make sure you import exactly as the Getting started guide describes

Import the scripts only once and the problem should disappear.

answered Nov 24 '18 at 3:45

Tico

2,15322533

add a comment |

Looking at the source code of your page, you were importing the scripts (jQuery, popper and bootstrap.js) twice.

That led to some issues/conflicts. Make sure you import exactly as the Getting started guide describes

Import the scripts only once and the problem should disappear.

answered Nov 24 '18 at 3:45

Tico

2,15322533

add a comment |

Looking at the source code of your page, you were importing the scripts (jQuery, popper and bootstrap.js) twice.

That led to some issues/conflicts. Make sure you import exactly as the Getting started guide describes

Import the scripts only once and the problem should disappear.

answered Nov 24 '18 at 3:45

Tico

2,15322533

Looking at the source code of your page, you were importing the scripts (jQuery, popper and bootstrap.js) twice.

That led to some issues/conflicts. Make sure you import exactly as the Getting started guide describes

Import the scripts only once and the problem should disappear.

answered Nov 24 '18 at 3:45

Tico

2,15322533

answered Nov 24 '18 at 3:45

Tico

2,15322533

answered Nov 24 '18 at 3:45

Tico

2,15322533

answered Nov 24 '18 at 3:45

Tico

2,15322533

add a comment |

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

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

搜尋此網誌

Wsrtjtyk