One navlink "Home" remaining active?

Code Feedback
1

Hi,
I have put a static menubar at the top of my tribute page simply to link to different areas of the same page.
All of the items in the navbar return to normal background color except the Home one. (please ignore the video one - thats to be worked on next).
The only difference that I can see is that the name for home in the anchor tag was just “#” or “#top”. I used these because using #home would not bring my pahe to the very top no matter what i tried.
Any thoughts on how to get the Home ‘tab’ to not remain white when clicked?
thanks.

2

Hi, ¿where is the id=“top”?

3

Hi,
Apologies for being unclear.
I have tried both “#” and “#top” in the navbar Home section…with the same result. I think it’s currently just set as “#” in the navbar section at top of html. :slight_smile:

4

ok , :slight_smile:
¿Then is a broken link?

5

Not sure what you mean - i tried with the #home but it would not return fully to the top of the page. The only way i could get it to fully return to top of the page was by using either # or #top

6

http://codepen.io/erretres/pen/vKxGgq

7

i did two changes:

  • create an id=“top”
  • delete id=“width” and replace it with a class=“width”

¿what happend when you click “videos”?

8

dumb question but…how do I view your fork tht you created. Im so new to codepen and I cant find my way around!
Amazed your worked it out so quickly.
Thevideo remains highlighted but thats becuse its just set to #. Ive not added an iframe yet.

9

click on “edit on codepen” and a new windows opens . //http://codepen.io/erretres/pen/vKxGgq
(on the message number six)

2.png906×577 97.8 KB

10

embaressing - I cant find it. Can edit my title, my profile!!!

11

Hi, you could find it?

12

Got it!!! thanks.
It works what you suggested but sadly it seems to reset the positioning of the continer in relation to th navbar. The top of the page is now obscured by the nav bar. I tried giving the container a different id so i could add margin/padding but it doesnt appear to change it.

1 Like
13

What do you see?
html

<div class="container width" style="background-color: rgba(218, 213, 219, .9)">

css

.width 
		{max-width: 85%;
			margin-top: 48px;
	}
14

i will try that also but I just managed to solve it a slightly different way. trying to paste the code here but i keeps just showing the code outcome!!!

1 Like
15

thanks for your help. much appreciated

16

you’re welcome, if anything i can help please let me know :slight_smile: (for me is a great oportunity for practice my english)

1 Like
17

well there is something if you have the time…!!
when viewing the page full screen th navbar is fine.
But as i reduce the browser width the navbar elements all immediately stack on top of eachother vertically.
Im trying to work out how to -

  1. get the white space to the right of the last nav bar button “video” be ignored so the nav bar remains in place till the browser edge reaches video button.
18

I think there are two ways (maybe more):

what you know about media queries and the toggle menu?

19

to be honest - i know nothing about them. Im totally new to coding. i will read the link you sent.
your help is appreciated.

20

is ok I’m always reading the documentation before doing something.