Question posted in
The full documentation can be found here.

Divi theme – Adding a menu in divi which generates unwanted white space

I added a fullwidth menu module in divi elegant themes. This should work fine, but for some reason it always generates white space above.

I could just add some css to fix the problem but the people at divi found it smart to make the extra white space an inline style. As the page is generated dynamically I cannot prevent this from being added.

I tried to add additional css with the visual builder itself.
I also went to the style.css in WordPress to add the additional code to the div, but this does not work.

As for using the inspect function in a browser and directly editing the style it works but like I said above after the page is generated I can of course edit the inline style, but how do I make it so that this is not generated to begin with.

<div class="et_dropdown_animation_fade et_pb_bg_layout_light et_pb_fullwidth_menu et_pb_fullwidth_menu_0 et_pb_module et_pb_text_align_left"
data-fix-page-container="on" style="margin-top:48px; padding-top:0px;">

So the thing I am trying to accomplish is that the margin becomes 0 bypassing the inline styling or a method to inline style from the backend in WordPress.
As adding styling to the css file does not work.

Tags:

2

Answers


  1. 0

    This is generated by Divi’s JS. Would be better if you could share a public URL, but if you’re looking for a quick patch, you could jquery to get the “top” value after the module is loaded, then counteract it with a negative margin-top of the same value.

    Add this to your Divi Theme Options integrations tab (or in a .js file, then call it from your child theme’s functions.php file, without the tags of course):

    </script>
jQuery(document).ready(function($){
    if (!$("body").is(".et-fb")) {
    var fullMenuTop = parseInt($('.et_pb_fullwidth_menu').css('top'), 10);
        $('.et_pb_fullwidth_menu').css("margin-top", - fullMenuTop);
        }

});
</script>
    Login or Signup to reply.
  2. 0

    The following worked for me.

    Divi’s full width menu module has an inline class named et_pb_row. Set its height to 0px and reduce padding to 0px as well.
    If the problem still persists, you probably have stray columns in the row. Look for the class et_pb_column and do the same.
    Cheers!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search