0

I'm trying to achieve a 'collapse icon' that's floated left followed by Copyright &copy using Bootstrap4.

I've seen other questions about this topic but none seem to actually answer the question. Other questions have different code with obvious typos, my code doesn't. Why is it that data-toggle & data-target aren't recognized when you do include all the dependencies?

.titleText{
    font-size:230%;
    color:green;
    font-weight:heavy;
    letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>

<div class="container">

    <nav class="navbar-nav navbar-expand-sm navbar-fixed-top text-success">
      
        <a class="navbar-brand titleText">Copyright &copy </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div="collapse navbar-collapse" id="collapseNavBar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="link-nav" href="#">Map</a>
                </li>
                <li class="nav-item">
                    <a class="link-nav" href="#">Cart</a>
                </li>
            </ul>
        </div>

    </nav>

</div>
</body>
</html>

The button isn't showing up, just the map & cart text. If you have a workaround I would appreciate a vanilla JS solution apposed to JQuery, since I'm not that experienced with JQuery and would rather use Javascript. Button

Sonic Strains
  • 43
  • 6
  • bro button is use for burger menu, which help you want from us ? – Nisharg Shah Jan 08 '19 at 18:38
  • Wow, this is almost identical: https://stackoverflow.com/questions/46100302/bootstrap-4-navbar-toggler-not-showing – Diodeus - James MacFarlane Jan 08 '19 at 18:42
  • 1
    Possible duplicate of [Bootstrap 4 navbar toggler not showing](https://stackoverflow.com/questions/46100302/bootstrap-4-navbar-toggler-not-showing) – ellipsis Jan 08 '19 at 18:43
  • @AshayMandwarya It's not the same, that person used different code so our solutions would not be the same. Just because we share similar "topic" doesn't mean we share similar "solution". – Sonic Strains Jan 08 '19 at 18:50

3 Answers3

2

Fixed the typo and updated HTML to show collapsible navBar

.titleText{
    font-size:230%;
    color:green;
    font-weight:heavy;
    letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>

<div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top text-success">
   <a class="navbar-brand titleText">Copyright &copy </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
            <span class="navbar-toggler-icon"></span>
        </button>

  <div class="collapse navbar-collapse" id="collapseNavBar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="link-nav" href="#">Map</a>
                </li>
                <li class="nav-item">
                    <a class="link-nav" href="#">Cart</a>
                </li>
            </ul>
        </div>
</nav>

</div>
</body>
</html>
nircraft
  • 8,242
  • 5
  • 30
  • 46
1

I have made some typo corrections, the toggle functionality now works with this code. But additional modifications are needed to align the elements correctly.

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>

<!-- Popper JS -->

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

<!-- Latest compiled JavaScript -->
<script 
   src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> . 
</script>

<style>    

.titleText{
    font-size:230%;
    color:green;
    font-weight:heavy;
    letter-spacing:1px;
}
</style>

</head>

<body>

<div class="container">

    <nav class="navbar navbar-fixed-top text-success">

        <button class="navbar-toggler" type="button" data-toggle="collapse" 
 data-target="#collapseNavBar">
            <span class="navbar-toggler-icon">Menu</span>
        </button>

        <div class="collapse navbar-collapse" id="collapseNavBar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="link-nav" href="#">Map</a>
                </li>
                <li class="nav-item">
                    <a class="link-nav" href="#">Cart</a>
                </li>
            </ul>
        </div>

        <a class="navbar-brand titleText">Copyright &copy </a>
    </nav>

</div>
</body>
</html>

I will construct the complete aligned html if need be. Hope this helps!

Aravindh Ravichandran
  • 77
  • 5
1

if you use class text-success in your code, so you cant see navigation bar background-color and default link color so i replace text-sucesss to navbar-light bg-light.

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light">
    <a class="navbar-brand titleText">Copyright &copy </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNavBar" >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="collapseNavBar">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Map</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Cart</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
</body>
</html>
Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73