Just dipping my toes into the world of HTML and CSS, but I need some guidance.
I'm trying to incorporate images and text (for the title) in my header using a navbar.
However, when I resize the window, the text doesn't move along with the image. It seems like it's due to the left: 480px; in the code, but without it, the text doesn't appear on the image at all.
Is there a way for the text to stay aligned with the image when resizing the window?
FULL-SIZE WINDOW VIEW: https://i.sstatic.net/jsw4D.png
SHRINKING THE WINDOW SIZE: https://i.sstatic.net/Wd8Tx.png
The text is centered with left:480px;. I'd like it to remain on the left side. What adjustments should be made in the code?
.navbar {
display: block;
align-items: flex-start;
padding: 0;
}
.navbar img {
width: 100%;
height: 100px;
display: block;
position: relative;
}
.navbar span {
position: absolute;
z-index: 1;
color: #fff;
width: 200px;
height: 28px;
font-family: NanumGothic;
font-size: 24px;
text-align: left;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 12.8px;
letter-spacing: normal;
top: 50px;
left: 480px;
}<!DOCTYPE html>
<html>
<head>
<title> Change Member Info</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no">
</head>
<body>
<form id="frm" name="frm">
<div class="header">
</div>
<div class="container">
<nav class="navbar">
<div class="navbar__logo">
<img src="/assets/images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503e3f243528240f2439243c350f60641063287e203e37">[email protected]</a>">
<span>My Website</span>
</div>
</nav>
</div>
</form>
</body>
</html>