Menu changing to semi-responsive when in desktop mode

Hi people!

Please take a look at the following page:

When the site first loads up, you’ll notice everything looks normal. However, whenever I then click another page to navigate to, the menu at the top changes to a semi-responsive menu with half of it disappearing to a slide out menu and the other two items remaining on the page.

I have no idea why this is happening.

Here is the HTML for that section of the page:

<header class="header fixed theme-header-2">
<div class="header-wrapper">
<div class="container">
<div class="row">
 
<div class="col-md-2  col-xs-6 top-logo">
<div class="logo">
<a href="http://evengroup.co.uk/"><img src="http://evengroup.co.uk/wp-content/uploads/2016/12/logo.jpg" alt="Even Group"/></a>
</div>
</div>
 
 
<div class="col-md-10 col-xs-6 right-menu">
<nav class="navigation closed clearfix">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#" class="menu-toggle-close btn"><i class="fa fa-times"></i></a><ul id="menu-main-menu-mobile-friendly" class="nav sf-menu"><li id="menu-item-835" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-28 current_page_item menu-item-835"><a href="http://evengroup.co.uk/">Home</a></li>
<li id="menu-item-834" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-834"><a href="http://evengroup.co.uk/about/">About</a></li>
<li id="menu-item-836" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-836"><a href="http://evengroup.co.uk/project">Acquisitions</a></li>
<li id="menu-item-831" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-831"><a href="http://evengroup.co.uk/requirements/">Requirements</a></li>
<li id="menu-item-833" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-833"><a href="http://evengroup.co.uk/contact/">Contact</a></li>
</ul></div> </div>
 
 
</nav>
 
<a href="#" class="menu-toggle btn ripple-effect btn-theme-transparent"><i class="fa fa-bars"></i></a>
 
</div>
 
</div>
</div>
</div>
</header>

I’ve noticed the change happens to this CSS Rule:

.wide .sticky-wrapper .header {
    width: 100%!important;
}

No matter what I click - any link, even just refreshing the page - that rule disappears and the semi-responsive menu takes its place even though the media query for that isn’t set to kick in until the display goes below 768px and even then it’s the whole menu that goes responsive, not just 3 items!

Any ideas?

The first I see is a stupid preloader. (Here I would normally leave)

Whenever I click the menu for another page I always get that preloader in my face. (Don’t do this!) N.B.*

For me the menu is consistent, it does never, at any viewport width or different desktop browsers, change as you describe. I could not provoke it either. Or maybe I don’t understand the issue?

*)
You’re annoying your visitors, that’s bad in itself.
But forcing them to look at the company logo and be repeatedly annoyed every time they load a page, that’s disastrous!

I have a feeling I understand the problem but I’m not 100% sure that I do.

In portrait I see a hamburger menu that slides out to show 5 items.
In landscape those 5 items are in a top nav header.

The problem may have something to do with the slide out needing to be explicitly closed and not closing when it loses focus.
But I suspect it has more to do with the media query not making the changes to all 5 menu items at a certain breakpoint.

If you can post screenshots and say what width they are at I think it would help in troubleshooting.

2 Likes

Hi Mittineague,

I would have come to the same conclusion as you about the media query not correctly being applied to all menu items at a certain breakpoint if it weren’t for the fact it was happening even when the screen remains the same size.

Here is a screenshot of how the menu looks when I first load the page.

And here is a screenshot of how it looks when I hit refresh:

Note:- I haven’t changed the screen size whatsoever. All I have done is hit refresh - so why is a media query kicking in when the viewport remains the same?

Also - If I use the developer mode in google chrome to inspect one of the <li> tags that’s being “hidden” in the hamburger menu - I don’t see any media queries in effect when looking through the CSS styles that are applied.

However, when inspecting the HTML (bearing in mind this is a WordPress theme so I didn’t write this code originally, I’m just trying to modify it to suit the client’s design) - I see that after the second menu item there is a new

    tag opened which contains the remaining menu items - so they appear to be geting shoved into a new <ul> wrapper! Again - this isn’t there when I inspect the same elements on the page’s initial load! Screenshots below for clarification:

    And then after I hit refresh:

    This leads me to think it is an issue somewhere with the HTML files rather than the CSS but I’ve looked through the files that build the HTML structure for this header and I can’t see anything that would cause this. I may need to move this to another forum because the files are written in PHP.

Quick update on this one in case anybody is interested or comes across a similar problem.

I used dreamweaver to perform a folder-wide search for the code <ul class="overflow-list sub-menu"> because that seemed to be what was causing the issue. It brought up 1 file and that was a javascript file. I found the following code:

     if( $(window).width() > 991 ){
        var Cwidth = parseInt($('.right-menu .swiper-slide').innerWidth());
        var menuWidth = 0;
        $('.right-menu .swiper-slide > ul > li').each(function() {
            menuWidth += parseInt($(this).find('a:first-child').outerWidth());
        });
        if( menuWidth > Cwidth ){
            var Lwidth = 0;
            var count = 0;
            while ($('.right-menu .swiper-slide > ul > li').length) {
                Lwidth = Lwidth + parseInt($(this).find('a:first-child').outerWidth());  
                 
                if( Lwidth > Cwidth ){
                    var more =   $('.right-menu .swiper-slide > ul > li').length - count -1;
                    console.log(more); 
                    $('.right-menu .swiper-slide > ul > li:gt('+more+')').wrapAll('<li class="more" />').wrapAll('<ul class="overflow-list sub-menu" />');
                    $('.right-menu .swiper-slide > ul > li.more').append('<a href="#" class="sf-with-ul">...</a>');
                    break;
                }

                count++;
            }
        } 
        

        var Cwidth = parseInt($('.left-menu .swiper-slide').innerWidth());
        var menuWidth = 0;
        $('.left-menu .swiper-slide > ul > li').each(function() {
            menuWidth += parseInt($(this).find('a:first-child').outerWidth());
        });
       if( menuWidth > Cwidth ){
            var Lwidth = 0;
            var count = 0;
            while ($('.left-menu .swiper-slide > ul > li').length) {
                Lwidth = Lwidth + parseInt($(this).find('a:first-child').outerWidth());  
                    
                if( Lwidth > Cwidth ){
                    var more =   $('.left-menu .swiper-slide > ul > li').length - count -1;
                    
                    $('.left-menu .swiper-slide > ul > li:gt('+more+')').wrapAll('<li class="left-more" />').wrapAll('<ul class="overflow-list sub-menu" />');
                   $('.left-menu .swiper-slide > ul > li.left-more').append('<a href="#" class="sf-with-ul">...</a>');
                    break;
                }

                count++;
            }
        }

    }// if( $(window).width() > 991 ){

I removed this code in it’s entirety and the issue went away. The menu behaves normally now. I’ve no idea why this code was there or what the benefit of having this in the theme was but removing it has worked for me (so far). I realise the issue didn’t turn out to be HTML/CSS related at all so if you want to move this to the javascript area then by all means do - I just wanted to update you so you didn’t go trying to figure out what might be causing it.

Thanks for your help with this, as always.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.