Search code examples
htmlcsstwitter-bootstrapmedia-queries

@media for drop down menu - show menu

I want to have my site responsive to different screen sizes. At the moment I am testing my site at a width of 765px (and lower). What I would like to happen is for the menu to appear when I click the three bars, but nothing happens. No menu appears, just the 'brand name'.

I am using the bootstrap navigation for my menu.

This is a screenshot of the page (edited): enter image description here

The Jquery code: - external file

@media screen and (min-width: 280px) and (max-width: 765px){
/* code goes here */
    .primary {
        color: orange !important;
        font-size: 14px;
    }
}

The color change is for testing sizes.

The HTML: - navigation only

<nav class="navbar navbar-default">
        <div class="container-fluid">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-header">
             <a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
            </div>
             <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                 <li class="active"><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="services.php">Services</a></li>
                    <li><a href="contact.php">Contact</a></li>
                    <li><a href="privacy.php">Privacy</a></li>
                    <li><a href="terms.php">Terms</a></li>
                    <li><a href="copy.php">Copyright</a></li>
                </ul>
            </div><!-- navbar collapse -->
        </div>
    </nav>

What have I missed? How I can I solve my issue?

Any help would be appreciated.

Thanks

Solution

  • One of the reasons would be messing up the order of jQuery and bootstrap.js. Bootstrap requires jQuery in order to run some events. So make sure your jquery script is before bootstrap.min.js or bootstrap.js.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default">
        <div class="container-fluid">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-header">
             <a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
            </div>
             <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                 <li class="active"><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="services.php">Services</a></li>
                    <li><a href="contact.php">Contact</a></li>
                    <li><a href="privacy.php">Privacy</a></li>
                    <li><a href="terms.php">Terms</a></li>
                    <li><a href="copy.php">Copyright</a></li>
                </ul>
            </div><!-- navbar collapse -->
        </div>
    </nav>