Navigation Bar Unit 2 Web

CS Discoveries Coding and Debugging Help
1

I have a navigation bar with buttons: Here is my code (without the brackets at the beginning of li and a tags-- when I included the brackets the code ran within this post and made it a ul.) How do I make the active page (or button) a different color?

HTML code
ul
li class=“nav”> a href=“index.html”> Home
li class=“nav”> a href=“rivers.html”> Rivers
li class=“nav”> a href=“history.html”> History
/ul

CSS code
nav {
display: inline;
background-color: #b3d9ff;
border: 2px black solid;
padding: 5px;
text-decoration: none;
border-radius: 4px;
color: black;
margin: 10px;
}

Looks like this:

help with nav
help with nav974×547 194 KB

Thank you.

2

Without having a link to the actual project, it’s a little hard to tell, but it does look like the . is missing from the beginning of the class. It could be as simple as that. It could be something else. If that doesn’t work, then please go ahead and post the link and we’ll take another look at it.

.nav {
display:inline;
background-color:

and so on
}

3

Thank you for taking the time to look over my post question. Any ideas on how I can make the active page button a different color?

4

Assuming this code is from your index page, try the following code: This adds an “active” . class to the active li and then in your css a new section of css that applies to the active class.

    **HTML code**
    <ul>
    <li class=“nav active”> <a href=“index.html”> Home</a>
    <li class=“nav”> <a href=“rivers.html”> Rivers</a>
    <li class=“nav”> <a href=“history.html”> History</a>
    </ul>

    **CSS code**
    .nav {
    display: inline;
    background-color: #b3d9ff;
    border: 2px black solid;
    padding: 5px;
    text-decoration: none;
    border-radius: 4px;
    color: black;
    margin: 10px;
    }

    li.active a {
    color: #b3d9ff;
    background-color: black;
    }

If that doesn’t work, please do send us a link to your page and we are happy to help you fix it.

Good luck!

Mike

5

Hi, Mike. I would love to send a link to my page but when I try to it tells me I do not have permission to share the project !?

I added the code, but now the button disappears - I shared a picture

Screen Shot 2020-01-23 at 1.02.45 PM
Screen Shot 2020-01-23 at 1.02.45 PM922×228 8.99 KB

What do you think? Thank you! :slight_smile:

6

I can probably debug it if I can access it. Is it a student page by chance? If so, you have to enable sharing in order for the students to have permission to share. I don’t think I have ever seen a teacher account not be able to share.

If it’s a student account, here’s a link to instructions on enabling sharing.

Otherwise, I would need you to copy and paste the entire .html document and the entire styles document and send them to me somehow.

Mike

1 Like
7

Hi Mike,

No, it is my account - I am signed in as teacher, but I still get that message. This has been an ongoing frustration - I can enable my Ss, but I can’t create a link!

8

I would recommend contacting support@code.org and see if they can look into it for you.

Mike

9

I got your code by email. It looks like when you copied and pasted some of my code, the “” marks were changed from straight to curly or vice versa … at any rate, when I pasted your code into weblab and retyped the quotation marks, I was able to get it part of the way there…

Then, I had to make some adjustments to the css (both yours and mine) to get it to look the way it does now… but, here’s my version

https://codeprojects.org/snR9yyrd1ydZGMjuZ7EZE_LjO5k-Zf_pH9Zq1KQ-MtI

Let me know if this is closer to what you were hoping for… (of course the other pages are missing as is the image as I don’t have those).

Also, it’s hard to see, but after you click on the link, look for the “view code” at the bottom of the page in the footer to see the code that I used to get this page.

Mike

1 Like
10

Hello Mike,

Wow! Thank you. Yes, it works perfectly!

With Appreciation,

Patricia Drake

1 Like
11

I’ve noticed some differences when I have students working on Chromebooks. I have to check that their keyboard is set to a US keyboard instead of an international keyboard (INTL). The quotation marks are different on the international keyboard than they are on a US one. It only seems to happen on Chromebooks because the settings are so readily available. Just a thought.

1 Like