Faithlessdbo Posted December 28, 2014 Share Posted December 28, 2014 (edited) Hello, I'm very new to CSS and I have a small issue with a navigation menu. Whenever I have a full screen and I don't resize my browser nothing is wrong. However whenever I resize on some pages the bottem of the navigation is gone. In the following picture the bug will be displayed: When I have my full screen again and refresh the page it will be normal again as displayed in the following picture: This bug makes mobile devices have issues from time to time and cannot see the whole navigation. If you need a live view you can navigate to my test page located here: http://testingcss.hostingsiteforfree.com/ Thank you for reading and have a nice day. Edited December 28, 2014 by Faithlessdbo Link to comment Share on other sites More sharing options...
davej Posted December 28, 2014 Share Posted December 28, 2014 Did you post the wrong image? I don't see any difference. To support mobile devices you will probably need to use media queries and the viewport meta tag. Link to comment Share on other sites More sharing options...
Faithlessdbo Posted December 29, 2014 Author Share Posted December 29, 2014 I havent posted the wrong image. If you look closely to the height of the navigation background you can see there is a difference. The image with the bug stops earlier with the height than the image without the bug. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 29, 2014 Share Posted December 29, 2014 (edited) You have javascript/jquery code that detects the height of page, if you resize height, on refresh the height will be at highest point where content will stop it shrinking any further, when you maximize the height remains the same until you refresh again, where it will now becomes the height of browser window, as the content height is smaller than this browser window height. You need this js/jquery code to run again if the page is resized. This is the code in question /* SIDEBAR HEIGHT/*-----------------------------------------------------------------------------------*/jQuery(document).ready(function($){ var h = $(document).height(); $('#sidebar').css({height: h+'px'});}); Edited December 29, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted December 29, 2014 Share Posted December 29, 2014 (edited) ALL css solution no js/jq to calculate height #wrapper { margin: 0 auto; min-height: 100%;/*added by dsonesuk*/ overflow: hidden; position: relative;/*added by dsonesuk*/ width: 990px;}#wrapper:after { /* new addition by dsonesuk */ background-color: #596D7F; background-image: url("style/images/noize.png"); border-left: 1px solid rgba(0, 0, 0, 0.5); border-right: 1px solid rgba(0, 0, 0, 0.5); bottom: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset; content: ""; left: 0; position: absolute; top: 0; width: 258px; z-index: 0;}#sidebar { /* amended by dsonesuk */ background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto auto; float: left; margin-top: -1px; position: relative; width: 258px; z-index: 100;} Edited December 29, 2014 by dsonesuk 1 Link to comment Share on other sites More sharing options...
Faithlessdbo Posted December 29, 2014 Author Share Posted December 29, 2014 ALL css solution now js/jq to calculate height #wrapper { margin: 0 auto; min-height: 100%;/*added by dsonesuk*/ overflow: hidden; position: relative;/*added by dsonesuk*/ width: 990px;}#wrapper:after { /* new addition by dsonesuk */ background-color: #596D7F; background-image: url("style/images/noize.png"); border-left: 1px solid rgba(0, 0, 0, 0.5); border-right: 1px solid rgba(0, 0, 0, 0.5); bottom: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset; content: ""; left: 0; position: absolute; top: 0; width: 258px; z-index: 0;}#sidebar { /* amended by dsonesuk */ background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto auto; float: left; margin-top: -1px; position: relative; width: 258px; z-index: 100;} This has solved the problem. Thank you very much! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now