me help in css just fix this img

it's not working the icon in nav!

<body>
    <nav class="navbar">
        <img src="./images/frieren-icon.png" alt="frieren-icon">
        <a href="#home">Home</a>
        <a href="#comandos">Comandos</a>
        <a href="#convite">Convite</a>
        <a href="#sobre">Sobre</a>
    </nav>
</body>

<body>
    <nav class="navbar">
        <img src="./images/frieren-icon.png" alt="frieren-icon">
        <a href="#home">Home</a>
        <a href="#comandos">Comandos</a>
        <a href="#convite">Convite</a>
        <a href="#sobre">Sobre</a>
    </nav>
</body>

body { background: #000513; font-family: Arial, sans-serif; margin: 0 }

.navbar {
    display: flex;
    align-items: center;
    background-color: #111;
    padding: 5px 10px;
}
.navbar img {
    height: 75px;
    position: absolute;
    margin-top: 37px;
}
.navbar a {
    color: white;
    text-decoration: none;
    padding: 4px 4px;
    margin-left: 5px;
}
.navbar a:hover {
    background-color: #333;
    border-radius: 4px;
}

body { background: #000513; font-family: Arial, sans-serif; margin: 0 }

.navbar {
    display: flex;
    align-items: center;
    background-color: #111;
    padding: 5px 10px;
}
.navbar img {
    height: 75px;
    position: absolute;
    margin-top: 37px;
}
.navbar a {
    color: white;
    text-decoration: none;
    padding: 4px 4px;
    margin-left: 5px;
}
.navbar a:hover {
    background-color: #333;
    border-radius: 4px;
}

6 Replies

Chimi•2mo ago

Do you have an example of what you're trying to do? I'm assuming you want the image aligned in the navbar with the other items. In this case, everyting you have under .navbar img is uneccessary as it's brute-forcing the image to be unaligned. Remove that, set a max-width value, maybe the 75px you have in your height, and you should be good to go. You're using display: flex, so everything will already line up. Don't set explicit heights. Hope this helps.

yan joshuaOP•2mo ago

im saying about fix

yan joshuaOP•2mo ago

and looks like hide "Home" but ins't working

yan joshuaOP•2mo ago

but i changed that thanks so still not working this i said about

yan joshuaOP•2mo ago

@Rebecca can u see for example photo, do u understand that?

ἔρως•2mo ago

the image has position absolute use grid on the nav, wrap the links in an <ul> and then a <li> for each link it's a very common arrangement

Gaming

Programming

me help in css just fix this img