CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
logos_164
logos_164

Reputation: 786

media query is triggering regardless of screen size

I am using Bootstrap 4.0 and am creating a wordpress theme with it, I have placed the bootstrap.css file in the css folder of my theme and the bootstrap.js file in the js folder of my theme. These are the only files in those folders.

My code in the index.php folder is this:

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap</title>

    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/bootstrap.css">
    <link rel="stylesheet" href="<?php  bloginfo('stylesheet_url'); ?>">


</head>

<body>

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>

</body>


</html>

I'm expecting it to give a Navbar like the one here

But instead, it collapses the Navbar as if it's on mobile. It moves the "Navbar" word all the way to the right and combines all the pages into a drop down which it moves to the left hand side of the screen.

I created an html file and it does the exact same thing.

My browser is set to 100%. I have never had this issue with Bootstrap.

Would anyone have any ideas on what could be causing this? I'm sure it's something extremely simply that I am simply missing.

Upvotes: 0

Views: 31

Answers (1)

Robert
Robert

Reputation: 6967

navbar-toggleable-md is not valid syntax in Bootstrap v4 (Beta). The class name you're looking for to add responsive toggling of your hamburger menu is navbar-expand-md

http://getbootstrap.com/docs/4.0/components/navbar/

The above link outlines version 4s Navbar component, including the toggle class. This class was not used in version 3, but for information pertaining to the 3 to 4 transition I would encourage you to read their Migration documentation:

https://getbootstrap.com/docs/4.0/migration/

Upvotes: 1

Related Questions