Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Nick Hennen
Nick Hennen
7,812 Points

I am trying to make a collapsible drop down navigation bar using Bootstrap and Groovy on Grails.

The nav bar collapses when the screen width hits a certain size but it does work as a drop down. Below is my code

<%-- Created by IntelliJ IDEA. User: nick Date: 8/29/14 Time: 4:53 PM --%>

<%@ page contentType="text/html;charset=UTF-8" %> <html> <head>

<!--- CSS -->

<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap-theme.min.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'custom.css')}" type="text/css">


<title>Current Projects</title>

</head>

<body>

<!-- Navigation bar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header pull-right">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=
        ".navbar-collapse">
            <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="#">Project Tracker</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Profile</a>
                </li>
                <li>
                    <a href="#">Messages</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right"></ul>
        </div>
    </div>
</div>

<!-- Logo Image --> <div class = container> <header class="page-header"> <img class="img-responsive" src=${resource(dir: 'images', file: 'sample.jpg')}> </header>

<!--- Project Tracker Grid Display --->

<div class="page-header"><h1>Project Tracker</h1></div> <div class="jumbotron"> <table border="1"> <g:each in="${allProjects}" status="i" var="thisProject"> <tr> <td>${thisProject.name}</td> <td>${thisProject.description}</td> <td>${thisProject.dueDate}</td> </tr> /g:each </table>

<!--- Test Form --->

<form action="current.gsp" method="post">
    <h2>Test form</h2>
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" id="name" name="user_name">
    </div>
    <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" id=mail" name="user_emial">
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" id="password" name="user_passwaord">
    </div>
    <div class="form-group">
        <label>Text Area</label>
        <textarea id="bio" class="form-control" name="user_bio"></textarea>
    </div>

    <button type="submit" class="btn btn-success btn-lg">Submit</button>

</form>

</div>

<!--- Copy Right and Dynamic Year possibly based on a users system date ---> 

<div style="text-align: center;">
    <span class="glyphicon glyphicon-copyright-mark"></span>
    Sons of Norway
    <script type="text/javascript">
    var theDate=new Date()
    document.write(theDate.getFullYear())
    </script>
</div>

</div>

<!--- linked JavaScript locally hosted--->

<script src=href="${resource(dir: 'js', file: 'jquery.min.js')}></script>
<script src=href="${resource(dir: 'js', file: 'bootstrap.min.js')}"></script>

</body> </html>

1 Answer

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Nick, all of the required markup for bootstrap seems to be correct. Could you explain what you mean "it doesn't work as a drop down"? Is the menu not expanding in mobile view when you click to toggle? Or are you trying to add a drop down menu to one of your existing links?

Nick Hennen
Nick Hennen
7,812 Points

The menu was not expanding in a mobile view but I discovered that my JavaScript files were not linked correctly. It seems that in Grails the way to bring in locally hosted JavaScript is to write the code as show in the examples at this link: http://grails.org/doc/latest/ref/Tags/javascript.html

I can't seem to display the Grails code here.

Andrew Shook
Andrew Shook
31,709 Points

Glad you found the answer Nick