Href link not clickable

[pattersonben99]

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.

[TechnoBear]

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.

[pattersonben99]

#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;

}

[TechnoBear]

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?

[Gandalf]

@pattersonben99

should still be clickable

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

[TechnoBear]

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

[PaulOB]

@TechnoBear

There must be something else on the page conflicting with the navigation

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

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.

[dresden_phoenix]

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 .

[Ray.H]

@dresden_phoenix

Try using href=“#” instead of href=“”

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.

[pattersonben99]

yeah I inspected but it came up with no errors

[pattersonben99]

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

[ronpat]

@pattersonben99

I am new to html and CSS

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.

[pattersonben99]

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

[ronpat]

@pattersonben99

i am currently taking a class

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:

Forum Posting Basics

When posting a coding question, it’s important to help people to help you. Ideally, post a link to a web page that demonstrates the issue. If that’s not possible (for example, if your site is not live yet) there are various other options. You might, for example, create a working example of the problem on a site like CodePen. You can then paste the link to your Pen here. (If you sign up for a free account at CodePen, your Pen will get embedded right here, like this: http://codepen.io/oknoblich/…

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

Link color need to be same

Welcome to the forums, ak0787777. Some general information for new members. If you have not done so already, please read our posting guidelines. https://www.sitepoint.com/community/t/forum-posting-basics/29771 Specifically, please note that we request a “working page” that demonstrates the issue so we can see the same thing on our computer that you see on yours. A “working page” begins with a <!doctype ...>. It continues with the <head> section which addresses any essential resources that …

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?

[tomplatz567]

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

[v123]

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!