Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #165246

    Hi folks!

    Could you take a look at my site http://www.seveneleven-magazin.net with a browser width between 768px and 999px?

    You will see that the menue overlaps the logo. In full width screen view, everything looks fine.

    It would be great if you could make the menu decide at the first break point (1000px) weather it has enough space for the items and if not, fall back to the mobile menue as soon as the browser width goes under that mark (not waiting till it is below 768px). Enfold is so smart – why not have a perfect menu experience, too? :)

    Cheers,
    Rolf

    #165278

    Hi Rolf!

    This post has information on changing the switch width that the menu changes to the mobile menu: http://www.kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320

    The menu does actually have some fallback for too many menu items which works for the majority of users but when you have a wide logo and menu items it can cause a bit of customization to be required.

    Best regards,
    Devin

    #165841

    Thanks, Devin. That’s fine, but the customization will disappear every time I update the theme.

    Look what I have coded, maybe you want to include the snippet in the next version of enfold?

    To avia.js, I added after line 1233:

    // function to decide if menu overlaps logo
    	function menuSqueezed(){
    	  if(!$("#header ul#avia-menu").attr("origwidth")) $("#header ul#avia-menu").attr("origWidth",$("#header ul#avia-menu").width());
    	  return(($("#header ul#avia-menu").attr("origWidth")*1 + $("#header .logo img").width()) > $("#header .container").width());
    	}

    and then I replaced line 1369ff with this:

       //plugin functionality
        function run($this){
       
          //menu doesn't exist
          if((isMobile() || menuSqueezed()) && !menuExists($this)){
            createMenu($this);
          }
    
          //menu already exists
          else if((isMobile() || menuSqueezed()) && menuExists($this)){
            showMenu($this);
          }
    
          //not mobile browser
          else if(!isMobile() && menuExists($this)){
            hideMenu($this);
          }
    
        }
    

    For me, this works like a charm because it adapts dynamically to the width of logo and menu and switches to the mobile menu if things won’t fit. You can try via the above url. This even works on a full width window with a too much stuffed menu. I could imagine this would be great for other enfold users, too, since surely nobody wants menu and logo to overlap. :)

    Cheers,
    Rolf

    • This reply was modified 11 months, 4 weeks ago by  mlkg.
    • This reply was modified 11 months, 4 weeks ago by  mlkg.
    #166342

    Hey!

    Thanks! I’ve asked Kriesi to take a look at the menus before as I don’t like the current possibility of overlaps either .

    Regards,
    Devin

    #166520

    Hello!

    Actually I used a similar solution to calculate the menu width and the logo width and to adjust the menu width dynamically based on the logo & menu container width. The difference though is that my function does not switch to the mobile menu but it tries to reduce the paddings and the logo image width based on the screen resolution. Tbh I think the mobile menu should only be displayed on very small screens.
    The code was added with theme update 2.2 and I improved the code now ( see: http://www.kriesi.at/support/topic/enfold-2-2-breaks-site-logo-image/#post-165531 ) – the new code will be part of the 2.3 update. The updated version supports all types of logos (different aspect ratios, etc.) and it will calculate the padding for each menu item individually whereas my first version of the script just applied the paddings of the first item to all menu items.

    Best regards,
    Peter

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Menu too large > overlaps with logo’ is closed to new replies.