Jump to content

Navigation menu bugged


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...