Jump to content

Navigation menu bugged


Faithlessdbo

Recommended Posts

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:

post-179619-0-69988400-1419758180_thumb.jpg

 

When I have my full screen again and refresh the page it will be normal again as displayed in the following picture:

post-179619-0-05854700-1419758172_thumb.jpg

 

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 by Faithlessdbo
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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 by dsonesuk
  • Like 1
Link to comment
Share on other sites

 

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...