Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

help web please

Hello, it's the first time I am using the forums so I'm not exactly sure if this goes here or if I can put this here at all…

I was making this website, but I don't know why when I open the homepage from a screen size like a smartphone, the drop down part of the responsive menu does not work (I found the menu on this address: http://responsive-nav.com)

Another thing is that there is a "Testimonial" that is supposed to go right next to, instead of below the articles-blog like thing there.

The Url is the following: http://kmw.esy.es (not finished at all)

6 Answers

Andrew Shook
Andrew Shook
31,709 Points

Alejandro, you need to add:

class="dropdown-toggle";

to your links that have dropdown menus. So they should look like this:

<a href="link-href.html" class="dropdown-toggle">A link</a>

First off, welcome to the forum. Don't hesitate to ask any of your questions in this forum. Secondly, I was able to pull up the site just fine on my iPhone and the drop down navigation performed as expected on the home page. However, when I clicked a link it lost its mobile version. I don't know if you just haven't set the responsive framework up on each page yet, but the home page works fine.

On a side note, do you study Krav Maga? I did quite a few years of it while I was in the Marine Corps. Absolutely loved it!

Hello! thanks! btw the responsive framework is only on the homepage yet, the thing is when you click in "NOSOTROS" (in cellphone screen) a drop down submenu should appear but it doesn't and it's killing me why, because the css codes are practically the same as the demo (albeit color details I believe).

The other problem I have is with the Testimonials down in the same homepage, I have tried everything I know but somehow it doesn't want to go right next to the articles.

Doing krav maga is something that has been heavily running in my head since I friends of mine do it...

Andrew Shook
Andrew Shook
31,709 Points

Oh now, watch out the devil dog's seeping out.

Signed, U.S. ARMY

Andrew Shook
Andrew Shook
31,709 Points

Alejandro, the mobile menu worked on my iPhone 5s so I can't help you with that. However here is some CSS that will fix your float problems.

/* line 468 */
#blog {
    float: left;
    width: 77%;
}

/* line 477 */
.post {
    width: 30.4%;
    padding:0 1.7% 2% 0;
    float: left;
}

/*line 754 */
footer {
    background:#cfb459;
    width:100%;
    height: auto;
    padding-top:1.6%;
    margin:0 auto;
        clear: both;
}

Hope this helps.

EDIT: Found why your mobile menu isn't showing on the other pages. This piece of html is missing:

<a href="#" class="nav-toggle active" aria-hidden="false">Menu</a>

I believe this is the toggle for the menu.

oh Thanks!!!!! :D I am going to try right away that code.

With the menu, you see it is supposed to display a '+' right next to "NOSOTROS" (in the cellphone screen menu) or a triangle in the regular screen size, since there's supposed to be a drop down there, but I can't make it work (in the demo it displays and works… http://viljamis.com/demo/responsive-nav-multiple-levels/ )

Thank you!! the Testimonials is now where it is supposed to (haven't uploaded it yet) Thanks!!!!!! :D

And I Was getting it all wrong!! thanks!!!!!!! now everything works just fine!! I will continue to develop this. (I just realized that I need to start using github…) Thank you so much Andrew! :D

Andrew Shook
Andrew Shook
31,709 Points

Here is the code from your live site I just edited in chromes dev tools:

<ul>
   <li><a href="index.html">INICIO</a></li>
   <li class="dropdown">
        <a href="#" class="dropdown-toggle">NOSOTROS</a>
        <ul>
            <li><a href="aboutus.html">QUIENES SOMOS</a></li>
            <li><a href="kravmaga.html">KRAV MAGA</a></li>
        </ul>   
    </li>
    <li><a href="programs.html">PROGRAMAS</a></li>
    <li><a href="blog.html">BLOG</a></li>
    <li><a href="contact.html">CONTACTO</a></li>
    <li><a href="free.html" class="free">CLASE GRATIS</a></li>
</ul>

When I added class="dropdown-toggle" to the Nosotros link the arrow and plus sign appeared for me. Here are some screen caps i put in dropbox 1 and 2.

you are awesome

I just realized I was writing the drop down-toggle somewhere else…

Now I can continue with this. really thanks!! :D

Andrew Shook
Andrew Shook
31,709 Points

De nada. Me alegro de haber podido ayudar.