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

HTML

Posted by Alan Guilfoyle
Alan Guilfoyle
10,875 Points

Mobile Size: Drop down menu automatically dropping when page refreshed

In mobile size, when the page is refreshed the menu automatically opens every time. So in other words, if you resize the web browser (I'm using Chrome) to a mobile size -> then reload the page -> the drop down hamburger menu automatically drops down

Any thoughts?

Here is Navbar code for index.html:

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand text-muted" href="#">Ribbit</a>
        </div>
        <div class="collapse navbar-collapse in">
          <ul class="nav navbar-nav navbar-right">
            <li class="active">
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#">About Ribbit</a>
            </li>
            <li class="dropdown">
              <a data-toggle="dropdown" data-target="#">Treehouse
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">About Treehouse</a>
                </li>
                <li>
                  <a href="#">Video Library</a>
                </li>
                <li>
                  <a href="#">Learning Adventures</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Plans &amp; Pricing</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi Alan, do you have a link to your website so we can take a closer look? :-)

Alan Guilfoyle
Alan Guilfoyle
10,875 Points

Jonathan Grieve You're quick! Sorry I was editing it!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi yes, sorry I just thought I'd quickly edit the markdown for you just in case. Markdown is super easy to learn if you don't know it already. :-)

Alan Guilfoyle
Alan Guilfoyle
10,875 Points

Jonathan Grieve: alright I was able to master Markdown and ready to go! Any thoughts on why it automatically pops down when the page is refreshed?

1 Answer

Sam Donald
Sam Donald
36,305 Points
Sam Donald
Sam Donald
36,305 Points

css

Alan Guilfoyle
Alan Guilfoyle
10,875 Points

...What? :no_mouth:

Sam Donald
Sam Donald
36,305 Points

As in post your CSS.

Since it relates to viewport width it's likely a media query issue. Have you used any media queries?