Href link not clickable

Hey, i am designing a website for a clothing line and i have a section at the top that is “men’s, women’s, about, etc” where the individual words should link to that category of clothing. However, they are all un-clickable, and i have no idea why, the code is correct and it was working earlier.

		<div id="topbar"> 
		
			<div id="logo">
			
				Shattered Society
			
			</div>
		
			<div id="menubarText">
		
				<a href="">Men's</a>
				
				<a href="">Women's</a>
				
				<a href="">About Us</a>
				
				<a href="">Contact</a>
				
				<a href="">Sign In</a>
		
			</div>

I know they don’t link to a specific page or url, but it should still be clickable, which it is not.

Welcome to the forums, @pattersonben99.

At a guess, I’d say another element is overlapping your links, preventing them from being clicked.

Please show us the relevant CSS, or, better still, a link to a live page.

#topbar {
	
	width:1000px;
	position:relative;
	margin:0 auto;
	height:35px;
}

#logo {
	
	font-family: 'Barriecito', cursive;
	font-size:25px;
	position:relative;
	margin-top: 9px;
	margin-bottom: 10px;
	margin-left:25px;
	float:left;
	
}

#menubarText {
	
	margin:13px 120px;
	float:left;
	
}

a {
	
	text-decoration:none;
	
}

a:link{
	
	color:gray;
	
}

a:visited {
	
	color:gray;

}

There must be something else on the page conflicting with the navigation, as I can see nothing there to cause the problem.

Have you tried using the browser developer tools to inspect the element?

What exactly do you mean? With an empty href, clicking one of those links isn’t going to go anywhere.

2 Likes

I was assuming that the OP meant the cursor would change to indicate a link, which is what happens.

1 Like

Yes it’s something that hasn’t been shown to us that is causing the issue :slight_smile:

The #topbar is a bad construct anyway as it does not automatically contain its floated children. The #topbar has been given a magic number to increase its height but that assumes too much about its content which can’t be known (user increases font-size etc).

Floats are outdated today anyway and flexbox would be a better option.

As @technobear said I would guess that another element has slid over the top of the menu but we can’t say what as the code posted above is basically working.

2 Likes

IF that is your ACTUAL HTML. Your issue lies in the fact you haven’t provided an valid HREF. Try using href="#" instead of href="". Hope that helps .

1 Like

Even with an empty <a href=""> it still activates a mouse pointer when you hover on it.

As others have mentioned, there is something else going on that we can’t see.

2 Likes

yeah I inspected but it came up with no errors

okay good to know, I am new to html and CSS so I appreciate the feedback, ill look into flexbox!

Have you taken a course in HTML and CSS fundamentals? If not, that would be the best possible thing you could do for yourself if you are seriously interested in HTML and CSS coding. There is simply too much to know to just “pick it up” piecemeal, randomly. teacher

i am currently taking a class, I just wanted to have something to practice on and attempt to make while i learn more.

Sounds like your practice post means that you are trying to work on material that hasn’t been covered yet… getting ahead of yourself, as we might say.

Please post a “working page” per our posting guidelines:

or read this post where I elaborated a bit about the “working page”:

We need to be able to see all of the relevent code and have it behave in our browsers the same way you see it.

A link to your test site will usually work, too.

PS: which (whose) class are you taking? What do you think of it so far?

Hi. Totally agree with you man. This question sounds weird but who knows probably he didn’t understand it during the lesson that is why he came here and ask. I think it is a great idea to have some practice after classes :slightly_smiling_face:

I had the same issue when I was making my website. The problem that I had faced was my code was wrong. So just code once again.
Now my code alright.
Thank you!