Menu too large > overlaps with logo

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 10 years, 6 months ago by mlkg.