CSS help needed for mega menu.

At some point in time, I received assistance via CSS snippets to change the size of my menu bar. As you will see it is located to the left and shared with an area where social sharing icons are located as well as a sign-in/register link. But for some reason, recently it appears that my menu selections from the drop-down mega menu are spread onto two lines. I am beginning to think the width of this menu bar is slightly too short. I just want to widen the overall menu portion of the menu bar. This might help. Check the theme demo http://home***.+++group.com It looks like theirs is the width of the whole page. Idk how to get that tho? but that is what I need.

  • Adam Czajczyk

    Hello Philip

    I hope you're well today!

    I have checked the site and I think I got the point if it comes to the "sub-menu" (drop-down menu) width and placement - as far as I understand you want it to be 100% width of the screen with equal spacing inside on left and right.

    That's, I'm afraid, very difficult to achieve with CSS only in this case. The mega-menu "width adjustment" described in the doc that you linked to seems fine but it has to be "tweaked" to work with your current theme. That is where quite a lot of lines of CSS would be necessary to address all possible breakpoints (screen widths) supported by theme and some resizing scenarios.

    The problem here is that the drop-down menu is "absolute positioned" and it's size and placement is calculated in relation to the closes parent block positioned "relatively" which is a ".container" div. Which, in turn is not as wide as a viewport (screen), its size is being changed via CSS media queries and we have no way of knowing how wide exactly are left and right margins (as this depends on a viewport size).

    One solution is to go for pure CSS but I think it would take tons of code with "fixed positioning" to address all possible scenarios and even then I believe it might be not that "fluent" as you might want.

    Another option is to go for changes in theme structure but that would require custom developed child theme and a different usage of bootstrap on which the theme is based or even getting rid of it.

    Finally, a "workaround" that you could use would be to go for some JavaScript. Below I'm posting a code of a simple MU-Plugin for your site that shows how that could work. What it does is that first an MU-plugin inserts the JS code in site's footer and then the JS code:

    - reads the width of the document (the entire page width)
    - reads the ".container" block width (which is smaller)
    - calculates the difference
    - divides the different by 2 and that gives us a left/right margin width
    - then that value is being turned to negative as we need to move the drop-down menu by that amount to the left
    - then sets the width and left placement for the sub-menu.

    This particular code is addressing the "Features" sub-menu on your site and seems to be working fine when tested via browser.

    <?php 
    
    function my_custom_mega_menu_submenu_size() {
    	?>
    <script type="text/javascript">
    	jQuery(function($) {
    		// let's get document width and container width
    		// then calculate the difference
    		// divide it by 2 and make it a negative value
    		// to know how far to move sub-menu to the left
    		var docwidth = $( document ).width();
    		var containerwidth = $( '.container' ).width();
    		var widthdiff = ((docwidth - containerwidth) / 2) * -1;
    
    		// set sub-menu width to 100% of the document width
    		// and move it to the left by calculated amount.
    		$('#menu-item-5639 ul').css( 'width', docwidth );
    		$('#menu-item-5639 ul').css( 'left', widthdiff );
    	});
    </script>
    	<?php
    }
    add_action( 'wp_footer', 'my_custom_mega_menu_submenu_size' );

    To apply it to your site:

    - create an empty file with .php extension (e.g. "my-mega-menu-width.php")
    - copy & paste the code into it
    - upload the file to the "/wp-content/mu-plugins" folder of your WP install; if there's no "mu-plugins" folder inside "wp-content" folder, just create one.

    Please note: this is a code that might need some additional JS adjustments, for example to dynamically adjust values upon browser window resizing and/or to set some "boundaries" depending on the screen size. That would, however, be a bit too far into custom coding which is outside the scope of this forum so in case you'd need additional tweaks to the code, please feel free to post a question on our "Jobs & Pros" job board here (please note: no WPMU DEV staff included!):

    https://premium.wpmudev.org/wordpress-development/

    The basic code given above should, however, work out of the box and should be a good foundations/starting point for further tweaking.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.