如何使导航栏中的图像可点击？

Question

I've currently created a navigation bar for my website for university assignment. I've implemented an image on their which is the universities logo which I'd like to link to the university homepage. However, when I try to use the anchor tag '' to make the image clickable to link to the homepage, it messes up for the style of my navigation bar and would like to know if there's a workaround. I know the issue is that the image will take on the styles of the anchor tags I have declared for the navigation bar. I'll include images of before and after creating the link and show the HTML and CSS of that section.

This is the navbar before making the image clickable.

This is the HTML for it:

<div class="top_nav"> 
    <img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
    <a class="active" href="#Home"> Home </a>
    <a href="#Hackathon">Hackathon</a>
    <a href="#Choose_a_Challenge">Choose a Challenge</a>
    <a href="#Digital_Horizons"> Digital Horizons </a>
</div>

This is the CSS for it:

.top_nav {
    overflow: hidden;
    background-color: #2c3e50;
    border-bottom: 20px solid #ed0162;
    position: fixed;
    top: 0;
    width: 100%;
}

.top_nav a {
    float: left;
    color: white;
    text-align: center;
    padding: 30px 20px;
    text-decoration: none;
    font-size: 17px;
    margin-bottom: 0;
    font-family: monospace;

}

.top_nav a:hover {
    background-color: #ed0162;
    color: white;
}


.logo {
    float: left;
    margin: 15px;
}

This is the HTML and webpage after I try to make the image clickable:

There is now big spacing inbetween and the hover style now affects the image when I don't want it too.

The HTML code after:

<header>

    <div class="top_nav"> 
        <a href="https://www.ntu.ac.uk/">
        <img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
        </a>
        <a class="active" href="#Home"> Home </a>
        <a href="#Hackathon">Hackathon</a>
        <a href="#Choose_a_Challenge">Choose a Challenge</a>
        <a href="#Digital_Horizons"> Digital Horizons </a>


    </div>

</header>

I've tried removing the 'logo' class from the image style but it doesn't really change it that much.

Answer 1

There are lots of ways to do this but flexbox makes it really easy. also will simplify your css. Just wrap the image in a anchor tag to make it clickable.

 .top_nav { display:flex; justify-content:space-around; align-items:center; overflow: hidden; background-color: #2c3e50; font-size:2vw; width: 100%; }.top_nav a { width:10%; color: white; text-decoration: none; font-family: monospace; }.top_nav a:hover { background-color: #ed0162; color: white; } img{ width:100%; } #short{ width:2.5%; }

 <div class="top_nav"> <a id='short' href='https:\\www.google.com'><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" scale="0"></a> <a class="active" href="#Home"> Home </a> <a href="#Hackathon">Hackathon</a> <a href="#Choose_a_Challenge">Choose a Challenge</a> <a href="#Digital_Horizons"> Digital Horizons </a> </div>

Answer 2

One way to solve this is to use the:first-of-type pseudo css selector. Something like that would be the correct way to handle it:

.top_nav a:first-of-type {padding: 0;}

EDIT

I'm sorry, on the original answer i miss the part to advice you wrapping your image with a element. So change this:

<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">

To:

<a href="URL" target="_blank">  <img class="logo" src="images/NTU_badge.png" alt="NTU Badge" /></a>

Answer 3

I find that it's generally pretty poor practice to use element names (such as a and div ) in CSS selectors at all, for this exact reason.

Consider adding something like class="navigation" to each link in your navbar, and then change the .top_nav a selector to .top_nav.navigation . Then you could add a similar class to the logo <a> .

Not only does this make the CSS more specific, but much more readable when someone else (or you in six months' time) has a look at this without any other context of the rest of the page.

Answer 4

I've now changed my css to:

.top_nav {
    overflow: hidden;
    background-color: #2c3e50;
    border-bottom: 20px solid #ed0162;
    position: fixed;
    top: 0;
    width: 100%;

}

.top_nav .navigation {
    float: left;
    color: white;
    text-align: center;
    padding: 30px 20px;
    text-decoration: none;
    font-size: 17px;
    margin-bottom: 0;
    font-family: monospace;


}

.top_nav .navigation:hover {
    background-color: #ed0162;
    color: white;
}

.top_nav .navigation:active {
  background-color: #ed0162;
  color: white;

I then added each class to each link in the nav bar like snazzy said, however the active css does not apply anymore when on that page, the 'active' page name should appear pink in the nav bar but it doesn't, any ideas?

Answer 5

Removing the margin: 15px; from the.logo css properties seems to help tighten it up.

Answer 6

You can Nest your image inside and design appropriate css for that link separately.