Links aren't working in CSS Grid

Links aren't working in CSS Grid
0

#1

Hi guys, I’m working on the Technical Documentation Page project, and for some reason my links aren’t working when they’re navbar in the CSS grid that I have set up. I copied and pasted one into the main section, which is also in the grid, and it worked fine. Can somebody help me? Posted the pen below


#2

Hi mate, I found your problem. There’s a div element that lies in the exact spot you have your navbar. It seems to be the wrapper for the test suite toggler. This div has an extremely high z-index so its lying right on top of your navbar. The id for the div element in question is “fcc_test_suite_wrapper”. you can enter the following css rule just to verify the element’s existence:

first enter:

#fcc_test_suite_wrapper {
    background-color: red;
}

This will allow you to see how much space the element is occupying. Then enter:

#fcc_test_suite_wrapper {
    display: none;
}

This will effectively remove the element from your page and you should see your links working. This should put you on the right track. Hope it helps.


#3

Wow thanks! I never would have guessed that. That makes total sense!


#4

Happy I could help. I used chrome dev tools to find the problem. I’t helps at least to know your way around the basics. Firefox has its own version, I don’t use ie or edge but i’m sure they have their own version too. to activate it you could right click on the element that you want to inspect and in the menu that pops up you should see something that says “inspect” or something along those lines. This Should bring up a separate window that gives you an x-ray view of your page and everything associated with it. Happy trails mate.