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

CSS

Posted by Mona Jalal
Mona Jalal
4,302 Points

How to make a box around the menu when I click on it and is active?

I want it to look like this: http://imgur.com/4maS9Hc but currently is like this monajalal.com Also is there a video here that covers so?

7 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Your web site delivers this as the document body, and monajalal.github.com redirects to monajalal.github.io, which then redirects back to monajalal.com.

<body>
<iframe src='http://monajalal.github.com'></iframe>
</body>

:point_right: Can you say "infinite loop"? :wink:

Mona Jalal
Mona Jalal
4,302 Points

sorry I am not following what you say nor I am sure if you are responding to me. Plus I am not aware of iframe.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

That's what your website is delivering as the document body (plus there's 29 lines of header and wrappers). The page never gets loaded because the iframe is self-referencing.

Mona Jalal
Mona Jalal
4,302 Points
Mona Jalal
Mona Jalal
4,302 Points

you would need to delete the cache. that would solve the problem

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I fetched this with wget and again with lynx. Neither has a cache.

Mona Jalal
Mona Jalal
4,302 Points
Mona Jalal
Mona Jalal
4,302 Points

so what's the solution? Can you please help further?

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Update your page? What do you get when you go to your URL?

Post your page's HTML here.

Mona Jalal
Mona Jalal
4,302 Points
Mona Jalal
Mona Jalal
4,302 Points

whew! I see I fixed the forwarding from .com to .io (silly mistake I did in hover.com) and I assume it will take quite a good time to get affective. I am not sure why I get this adblock plus thing still going on. I though it was fixed by clearing the cache but now I see it again! P.S.: Should I also have a CNAME with http://monajalal.com in my github repo? Is that causing the loop? http://imgur.com/ayoLGCD http://imgur.com/iZddNmR Please have a look at the above screenshots :)

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The redirection from github to your main site isn't a problem in itself. The big issue is that your main site has this iframe pointing to the github site.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Anyway, disregarding the circular reference for the moment, it sounds like you could do what you want by having a click handler add a class to your clicked menu element, and in your CSS define that class as having a border.

$(".row img").click(function (e) {
  $(".row img").removeClass("boxed");  // remove the border from any other item first
  $(e.target).addClass("boxed");       // add border to clicked item
});

.row img { border: 3px solid transparent; }  /* reserve border space */
img.boxed { border: 3px solid yellow; }
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Were we talking about the navbar? I may have gotten confused since the sample website only put boxes around the images when they were clicked on.

If it's for the navbar, Philip has the right idea, but it can be streamlined a bit and you also wanted to highlight the active item:

.nav-link { padding: 0 .8em; }
.nav-link.active, .nav-link:hover {
    background-color: #5bc0de;
    border-radius: 5px;
}
Mona Jalal
Mona Jalal
4,302 Points
Mona Jalal
Mona Jalal
4,302 Points

Ok, I guess I fixed it. Can you please check monajalal.com and let me know if it is working for you? I removed the CNAME that had monajalal.com in it from the git repo

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

You still have the iframe, but you no longer have the redirect circuit — monajalal.github.io is now delivering the actual content.

I updated my answer above using your actual tags and classes. :arrow_heading_up:

Philip Gales
Philip Gales
15,193 Points
Philip Gales
Philip Gales
15,193 Points

Here is what I would do.

//set the background as red on :hover, or :focus
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255,255,255,.75);
    background-color: red;
}

//add some padding to make the packground large. 
//Note I did this without any hover or focus state active.
.navbar-nav .nav-link {
    display: block;
    padding: .425rem .8rem;
}

//now you curve the background for a smoother, modern look
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255,255,255,.75);
    background-color: red;
    border-radius: 3px;
}

After all of that, now you change the red to a color you like.