+ 4

FIX:On minimizing browser the nav bar shifts??

I want it to adjust browser size so i see it as it is

25th Jul 2017, 7:43 AM
AKASH JOSHI
AKASH JOSHI - avatar
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
25th Jul 2017, 10:13 AM
visph
visph - avatar
+ 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
25th Jul 2017, 8:02 AM
CalebHM
CalebHM - avatar
+ 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
25th Jul 2017, 7:54 AM
The Coding Sloth
The Coding Sloth - avatar
+ 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.
25th Jul 2017, 8:49 AM
The Coding Sloth
The Coding Sloth - avatar
+ 4
Can you post the code?
25th Jul 2017, 8:33 AM
The Coding Sloth
The Coding Sloth - avatar
+ 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 ;)
25th Jul 2017, 10:21 AM
visph
visph - avatar
+ 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
25th Jul 2017, 10:28 AM
visph
visph - avatar
+ 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>>
25th Jul 2017, 8:42 AM
AKASH JOSHI
AKASH JOSHI - avatar
+ 1
run it on Desktop
25th Jul 2017, 8:42 AM
AKASH JOSHI
AKASH JOSHI - avatar
+ 1
not respinsive to android screen size
25th Jul 2017, 8:43 AM
AKASH JOSHI
AKASH JOSHI - avatar
+ 1
responsive*
25th Jul 2017, 8:43 AM
AKASH JOSHI
AKASH JOSHI - avatar
+ 1
bro you did it!!!!!
25th Jul 2017, 10:17 AM
AKASH JOSHI
AKASH JOSHI - avatar
0
sloth its still not happening
25th Jul 2017, 8:28 AM
AKASH JOSHI
AKASH JOSHI - avatar
0
yo!!
25th Jul 2017, 10:23 AM
AKASH JOSHI
AKASH JOSHI - avatar
0
can we connect via social networking
25th Jul 2017, 10:24 AM
AKASH JOSHI
AKASH JOSHI - avatar