Docs

[Audseo]

Hey there, a recent site of ours is having trouble with Mozilla Firefox. At tablet/notebook size, the mobile menu does not work (nothing happens on click). I have the (below) CSS and JS in there to allow a stacked to inline transition (client wants logo to show at all times – not enough navbar real estate for full-time inline). I got this JS and CSS from your forum replies for other clients.

I’ll include the deets on the next reply.

JS

jQuery(document).ready(function($) {
var $masthead = $(‘.masthead’);
var $logo = $(‘.x-brand’);
var $navbar = $(‘.x-navbar’);
var $navBtn = $(‘.x-btn-navbar’);
var $logoBar = $(‘.x-logobar-inner > .x-container’);

function navStackToInline() {
if ( $navbar.hasClass(‘x-navbar-fixed-top’) ) {
$masthead.removeClass(‘masthead-stacked’);
$masthead.addClass(‘masthead-inline’);
$logo.insertBefore($navBtn);
} else {
$masthead.removeClass(‘masthead-inline’);
$masthead.addClass(‘masthead-stacked’);
$logo.appendTo($logoBar);
}
}

navStackToInline();

$(window).ready(navStackToInline).scroll(function() {
navStackToInline();
});

});

CSS

@media (min-width: 980px) and (max-width: 1100px) {
.masthead-stacked .x-btn-navbar {display: inline-block;}
.masthead-stacked .x-navbar {text-align: center;}
.x-nav-wrap.desktop {display: none;}
}

.masthead-inline .x-brand img {
width:121px;
padding-top: 20px;
}

.masthead-inline .x-navbar{
height: auto;
}

[Audseo]

This reply has been marked as private.

[Christopher]

Hi there,

Would you please clear cache on Firefox and test again? Mobile navigation works fine for me.

Please see the attachment and confirm me or let us know how we can replicate this on our end.

Thanks.

[Author]

Posts