I'm new to the world of HTML/CSS and currently working through an online course. I've been working on one of my projects for a few hours and am absolutely stumped with an issue with my navigation bar.
The logo and nav links display fine on a desktop browser, however when you make the browser the minimum size or browse on a mobile the logo image is cut off on the right hand side.
Any help would be greatly appreciated.
<html>
<header id="header">
<title>Eltee's Electric Drums</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto">
<div class="top-bar">
<img src="https://i.imgur.com/KCS3KND.png" id="header-img" class="header-img"></img>
<nav class="nav-bar" id="nav-bar">
<a class="nav-link" href="#home" id="home">Home</a>
<a class="nav-link" href="#features" id="features">Features</a>
<a class="nav-link" href="#video" id="video">Video</a>
<a class="nav-link" href="#pricing" id="pricing">Pricing</a>
</nav>
</div>
</header>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
.top-bar {
display: flex;
background-color: #ECECEC;
flex-wrap: wrap;
position: fixed;
top: 0;
right: 0;
left: 0;
align-items: top;
}
.header-img {
display: flex;
flex: 1;
justify-content: center;
width: 100%;
max-width: 534px;
height: auto;
padding: 10px 20px 10px 20px;
margin-right: auto;
margin-left: auto;
}
.nav-bar {
display: flex;
flex: 2;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-family: 'Roboto', serif;
padding: 5px 0px 5px 0px;
}
.nav-bar a{
color: black;
text-decoration: none;
border-right: 1px solid black;
padding: 0px 5px 0px 5px;
}
.nav-bar a:hover {
color: #808080;
}
.nav-bar a:last-of-type {
border: none;
}
#home {
flex-basis: 20%;
display: flex;
justify-content: center;
}
#features {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#video {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#pricing {
display: flex;
flex-basis: 20%;
justify-content: center;
}
body {
padding: 100px 0px 0px 0px;
}
</style>
CodePudding user response：
You needed a media query to deal with mobile viewport. I've added to your script as .top-bar img. Also your markup was located in the incorrect spot. <style> tag lives inside <head> and following </head> you need body tag and inside body tag is where your markup lives. so it should go as follows <html><head><style>css lives here</style></head><body>markup lives here</body></html>
See snippet for working solution, though it will likely only show the mobile solution given the snippet editor dimensions, so ingest the markup and styling into your page and it should works as expected for both mobile and desktop.
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
.top-bar {
display: flex;
background-color: #ECECEC;
flex-wrap: wrap;
position: fixed;
top: 0;
right: 0;
left: 0;
align-items: top;
}
@media only screen and (max-width: 500px) {
.top-bar img {
display: flex;
width: 100%;
box-sizing: border-box;
}
}
.header-img {
display: flex;
flex: 1;
justify-content: center;
width: 100%;
max-width: 534px;
height: auto;
padding: 10px 20px 10px 20px;
margin-right: auto;
margin-left: auto;
}
.nav-bar {
display: flex;
flex: 2;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-family: 'Roboto', serif;
padding: 5px 0px 5px 0px;
}
.nav-bar a {
color: black;
text-decoration: none;
border-right: 1px solid black;
padding: 0px 5px 0px 5px;
}
.nav-bar a:hover {
color: #808080;
}
.nav-bar a:last-of-type {
border: none;
}
#home {
flex-basis: 20%;
display: flex;
justify-content: center;
}
#features {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#video {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#pricing {
display: flex;
flex-basis: 20%;
justify-content: center;
}
body {
padding: 100px 0px 0px 0px;
}<html>
<body>
<header id="header">
<title>Eltee's Electric Drums</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto">
<div class="top-bar">
<img src="https://i.imgur.com/KCS3KND.png" id="header-img" class="header-img"/>
<nav class="nav-bar" id="nav-bar">
<a class="nav-link" href="#home" id="home">Home</a>
<a class="nav-link" href="#features" id="features">Features</a>
<a class="nav-link" href="#video" id="video">Video</a>
<a class="nav-link" href="#pricing" id="pricing">Pricing</a>
</nav>
</div>
</header>
</body>
</html>CodePudding user response：
Try with this and see what you get. I put your logo inside a div, a good practice when handling images, and I tell the logo to fit the div, and I give the wanted dimensions to the div.
@import url('https://fonts.googleapis.com/css?family=Roboto');
.top-bar {
display: flex;
background-color: #ECECEC;
flex-wrap: wrap;
position: fixed;
top: 0;
right: 0;
left: 0;
align-items: top;
}
.header-img {
display: flex;
flex: 1;
justify-content: center;
width: 100%;
max-width: 534px;
height: auto;
padding: 10px 20px 10px 20px;
margin-right: auto;
margin-left: auto;
}
.header-img img{
width:100%;
height:auto;
}
.nav-bar {
display: flex;
flex: 2;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-family: 'Roboto', serif;
padding: 5px 0px 5px 0px;
}
.nav-bar a{
color: black;
text-decoration: none;
border-right: 1px solid black;
padding: 0px 5px 0px 5px;
}
.nav-bar a:hover {
color: #808080;
}
.nav-bar a:last-of-type {
border: none;
}
#home {
flex-basis: 20%;
display: flex;
justify-content: center;
}
#features {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#video {
display: flex;
flex-basis: 20%;
justify-content: center;
}
#pricing {
display: flex;
flex-basis: 20%;
justify-content: center;
}
body {
padding: 100px 0px 0px 0px;<header id="header">
<title>Eltee's Electric Drums</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto">
<div class="top-bar">
<div class="header-img"> <img src="https://i.imgur.com/KCS3KND.png" id="header-img" ></img></div>
<nav class="nav-bar" id="nav-bar">
<a class="nav-link" href="#home" id="home">Home</a>
<a class="nav-link" href="#features" id="features">Features</a>
<a class="nav-link" href="#video" id="video">Video</a>
<a class="nav-link" href="#pricing" id="pricing">Pricing</a>
</nav>
</div>
</header>