Home / Forums / You Theme Support / How to adjust the width of the "mega menu"

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts

  • Mike
    Participant

    Following the tutorial listed here, I was able to setup a mega menu:
    http://docs.acoda.com/you/2016/03/09/menus/
    https://www.youtube.com/watch?v=nssP2AzJwB8

    However, the default width of the mega menu spans the entire page (I assume because I have set a wide layout for the site). I would like the ability to control the width to match the dimensions of the content. Can this be achieved, perhaps through editing CSS for the mega menus? If so, can it be adjusted PER menu, perhaps by copying the mega menu CSS and renaming it as needed?

    Hi @talanithus

    Changing the mega-menu’s width can be done via CSS. It is also possible to style each mega menu as they have their own unique class name that will help identify it. You can also manually declare a class name on the menu item. For example, when you setup the Mega Menu initially, you added “mega menu” as the class. You just need to add another class beside it so it becomes a unique identifier for that specific menu item.

    Thanks!


    Mike
    Participant

    I have copied all of the CSS that refers to “mega-menu” in you/style.css and renamed it to “events-menu” in my you-child/style.css file, and then replaced “mega-menu” for “events-menu” in the CSS field on the top level menu option, so that I can begin experimenting with it. However, it shows the menu as one long menu, rather then breaking it up into the columns. What have I missed?

    Code copied to you-child/style.css file:

    	#acoda-tabs ul li.events-menu ul li span.dropmenu-icon {display:none;}
    	
    	#acoda-tabs ul li.events-menu > ul > li:hover > a,
    	#acoda-tabs ul li.events-menu > ul > li.current-menu-ancestor > a {background-color:transparent;}
    
    	#acoda-tabs ul li.events-menu ul.sub-menu:after,
    	#acoda-tabs ul li.events-menu ul.sub-menu:before {
    	 display:none;	
    	}
    
    	#acoda-tabs ul li.events-menu ul li {
    	 float:left;
    	 width:auto;
    	}
    	
    	#acoda-tabs ul li.events-menu ul li ul li {
    	 float:none;	
    	}
    	
    	#acoda-tabs ul li.events-menu ul ul {
    	 position:relative !important;
    	 display:block !important;
    	 left: auto !important;
    	 opacity:1;
    	 margin:0;
    	 visibility:visible !important;
    	 -moz-border-radius: 0;
    	 -webkit-border-radius: 0;
    	 border-radius: 0;
    	 -moz-box-shadow:none;
    	 -webkit-box-shadow:none;
    	 box-shadow:none;
    	 border:none;
    	 background:none;
    	}
    	
    	#primary-wrapper #acoda-tabs ul li.events-menu ul.sub-menu ul {
    	 -webkit-transform:none;
    	 -moz-transform:none;
    	 transform:none;	
    	 padding:0;
    	}
    	
    	#acoda-tabs ul li.events-menu ul.sub-menu ul:before,
    	#acoda-tabs ul li.events-menu ul.sub-menu ul:after {
    	 display:none;	
    	}

    I have sent login credentials on other support threads, should you require them.


    Mike
    Participant

    This is also in the edited CSS, forgot to include it:

    .dock-tab-wrapper.dock-menu ul.dock_menu .events-menu ul ul {margin-left:0;}

    The easiest workaround is the option I explained as you only need to add an additional class, then apply the width to that menu using the new class.

    Can you please give me permission to setup your menu and set the width for it?

    Thanks!


    Mike
    Participant

    Sure, but I’d like to know where I went wrong as well. The goal is to get it done AND understand how it is done, but I really do appreciate the assistance.

    Thanks!

    Hi @talanithus

    The Sample mega menu is here: http://thepaintandpour.us/sample-page

    The ‘Home’ mega menu has width set lower than the default width on ‘Career’.

    Go to this page http://thepaintandpour.us/wp-admin/nav-menus.php and edit ‘Sample Mega Menu’ to see the Classes I added to ‘Home’ and ‘Career’.

    This was the CSS I added to change the width of Home.

    .mega-menu.first-mega-menu ul.sub-menu {
        width: 900px !important;
        left: -700px !important;
    }
    
    .mega-menu.first-mega-menu ul.sub-menu li {
        width: 30% !important;
    }

    Thanks!

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

You must be logged in to reply to this topic.