Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jquery menu working but completely transparent in Safari and most mobile browsers

    I have a link that, once clicked, reveals a menu. It is designed for smaller browser windows at a convenient breakpoint in the website design (965px). Here is how it is behaving in different browsers:

    Firefox (desktop), Opera (desktop), Puffin (mobile):

    • Works perfectly.


    Safari (desktop & mobile), Opera Mini, Google Chrome (mobile), Dolphin (mobile), Mercury (mobile), Coast by Opera (mobile):

    • Doesn't show at all - however, if I click (or tap) the menu and then click where the dropdown should be, it triggers the links - so the menu is there, just completely transparent!


    Google Chrome (desktop):

    • Exact same transparent-but-still-functioning behavior as above but only when it is sitting over the image gallery I have at the top of the page; when I scroll past the gallery it appears and functions normally.


    I'm a little perplexed as to why this would be. So far seems to be a CSS issue (hence why I've posted it in this forum) but I can't seem to nail it down; it looks like it might be the interaction of the menu code and the gallery code, hence why Chrome is displaying its unique behaviour. I'm adding notes to go along with the code below.

    Here is a link to the site thusfar:
    Trenholme & Company Chartered Accountants

    And here's some snippets of the code relevant to the click menu:

    HTML:

    Code:
    <div id="hammenushowbio" class="viewmenu">MENU</div>
    			<div id="hammenu">
    				<div class="hammenulinks">
    					<ul>
    						<li data-slide="2" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">FIRM PROFILE</div></li>
    						<li data-slide="3" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CLIENT SERVICES</div></li>
    						<li data-slide="4" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">OUR TEAM</div></li>
    						<li data-slide="5" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CONTACT US</div></li>
    					</ul>
    				</div>
    			</div>
    	</div>
    CSS:

    Code:
    .viewmenu{
    	display:none;
    	float:right;
    	font-size:13px;
    	font-weight:600;
    	text-align:right;
    	margin-right:30px;
    	color:#FFFFFF;
    	letter-spacing:1.5px;
    	cursor:pointer;
        }
        #hammenu{
    	position:fixed;
    	z-index:99; //enabling/disabling has no effect
    	width:100%; //enabling/disabling has no effect
    	margin-top:55px;
    	left:0; //enabling/disabling has no effect
        }
        //enabling/disabling from here downward has no effect
        #hammenu:after{
    	content:"";
    	position:absolute;
    	display:block;
    	width:0;
    	height:0;
        }
        .hammenulinks{
    	display:inline-block;
    	float:left;
    	width:100%;
    	font-size:16px;
        }
        .hamtext{
    	margin-left:30px;
    	letter-spacing:1.5px;
        }
        .hammenulinks li{
    	background-color:#FFFFFF;
    	color:#1E2129;
    	display:block;
    	text-align:left;
    	padding-top:20px;
    	padding-bottom:20px;
    	border-bottom:1px #eeeeee solid;
        }
        .hammenulinks li:hover{
    	cursor:pointer;
    	background-color:#eeeeee;
        }
    Jquery (It doesn't appear to be a JS issue as I have utilized the exact same click functions more than a dozen other times on the site and they are all working correctly in all desktop and mobile browsers. However, my knowledge of JS is quite limited at this point so I can't rule it out for sure):

    Code:
    $(document).ready(function () {
        var $slides = $('#hammenu').hide();
        $('div#hammenushowbio').show().click(function () {
            var $slider = $(this).next("#hammenu");
            if (!$slider.length){
                $slider = $(this).closest("#hammenu");
            }
            $slides.not($slider).stop(true, true).slideUp();
            $slider.stop(true, true).slideToggle(0);
        });
        });
    Mediaq (enabling or disabling has no effect):

    Code:
     @media (max-width : 965px){
    	.viewmenu {
    		display:inline-block;
    	}
    	#hammenu {
    		display:inline-block;
    	}
        }
    
        @media (min-width : 966px){
    	#hammenu {
    		display:none !important;
    	}
    	.viewmenu {
    		display:none !important;
    	}
        }

  • #2
    New Coder
    Join Date
    Aug 2014
    Posts
    97
    Thanks
    0
    Thanked 18 Times in 18 Posts
    By removing the overflow: hidden on the .navigation{} rule, it then shows and works in the chrome console emulating touch devices.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes!!!! solved!

    Thank you so much fastsol, you are a life-saver!!
    That was left over from another set of code I was using earlier for the drop-down menu.

    Man... so awesome


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •