New course! Every coder should learn Generative AI!
Try a free lesson+ 4
FIX:On minimizing browser the nav bar shifts??
I want it to adjust browser size so i see it as it is
15 Answers
+ 6
Are you sure to want your header be 'fixed' display?
Because if you keep aspect ratio of banner image, it could take big height on landascape oriented viewports ^^
Or you need to assume responsiviness not keeping banner aspect ratio...
Anyway, you code reworked to better handle responsiviness (with fixed header, as you seem to want :P):
https://code.sololearn.com/WGYf88xNh8ID/#html
+ 16
You also want to look into using media queries to make your Web page responsive to different size browser windows and screens.
Try this link: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
+ 5
Use percentages in css, not pixels.
for example if you want somethings width to take up half the screen,
width: 50%;
this way whenever you resize your browser, it will still take up the 50% of the width
+ 5
If you change the #filter top to 25% it doesn't move, the image also isn't moving so it looks your nav is in the wrong place, while actually your image is.
+ 4
Can you post the code?
+ 3
Yeah :P
Feel free to ask for more information about how to: there was too much many topics to describe in the changes and uses to explain each point by point ;)
+ 3
I was meaning "ask about the changes I've made in your code" ;)
For this question, better to open a new topic after having verify if question doesn't already exist and have answer(s) in Q&A ^^
Anyway, I cannot help you about social media connexion... I'm not interested at all by this side of internet, so doesn't even want to know how to anything about it :P
+ 1
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Anton');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
ul {
list-style-type: none;
margin: 0px auto;
padding: 0%;
overflow: hidden;
background-color: #999966;
position:relative;
}
li {
font-size:150%;
float: left;
padding:0% 8%;
}
li a {
display: block;
color:#111;;
text-align: center;
padding: 20px 20px;
text-decoration: none;
font-family: 'Anton';
}
li:hover:not(.active){
background-color: #7a7a52;
}
.active {
background-color:#4CAF50;
}
#box{
top:0;
padding:0;
margin:0;
}
#filter {
position:fixed;
top: 200px!important;
left: 0.88%;
right:0.7%;
z-index: 1;
}
.body{
padding:0%;
position:fixed;
margin:0.88%;
}
div {
background-size:contain;
}
#w{
position:fixed;
top:0px;
}
</style>
</head>
<body class="body">
<div id="box">
<div id="w" class="body"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj_dVeIBvh48F4FBW9k_Q-m8SprfD4SNdUN2eHFwalwGUROEWPx0eNbKRvPg" height=260px width=1320px></div>
<ul id="filter" class="body">
<li class="active"><a href="#home"><i class="fa fa-home"></i></a></li>
<li class="col"><a href="#news">SKILLS</a></li>
<li><a href="#contact">CONTACT ME</a></li>
<li class="col"><a href="#about">FUTURE PLANS</a></li>
</ul>
</div>
</div>
</body>
</html>>
+ 1
run it on Desktop
+ 1
not respinsive to android screen size
+ 1
responsive*
+ 1
bro you did it!!!!!
0
sloth
its still not happening
0
yo!!
0
can we connect via social networking
Often have questions like this?
Learn more efficiently, for free:
Hot today
Cyber security
1 Votes
Personal chat
1 Votes
Bash
0 Votes
Why exception is not handled
1 Votes
Links of cmy codes
4 Votes
Adding image to html
0 Votes
Link
5 Votes
How can I learn to code?
0 Votes