Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How can I minimize space above and below WordPress's Mega Menu and search box?

I’m using WordPress Theme with Elementor and Mega Menu Plugin. I want to adjust space between search box and mega menu as I mention in the picture for both desktop and mobile view.
Can anyone tell me how to do that please ?

Here is site’s live URL

This is the desired result:

enter image description here

<header id="header" class="header-top-relative">

        <div class="container"><div id="header-18" class="dt-header-tpl header-18"><div data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid vc_custom_1578387278462 vc_row-has-fill vc_row-o-content-middle vc_row-flex" style="position: relative; left: -174.6px; box-sizing: border-box; width: 1519px; padding-left: 174.6px; padding-right: 174.4px;"><div class="wpb_column vc_column_container vc_col-sm-12 vc_col-has-fill"><div class="vc_column-inner vc_custom_1578387352345"><div class="wpb_wrapper"><div class="vc_row wpb_row vc_inner vc_row-fluid dt-sc-header vc_custom_1578387376355 vc_row-has-fill vc_row-o-content-middle vc_row-flex"><div class="wpb_column vc_column_container vc_col-sm-2" style=" text-align:left; "><div class="vc_column-inner vc_custom_1578308737497"><div class="wpb_wrapper"><div id="dt-1510569851530-f701e413-6426" class="dt-logo-container logo-align-left vc_custom_1578392479744">  <a href="https://www.dpowercool.com/demo/" rel="home"><img src="https://www.dpowercool.com/demo/wp-content/uploads/2017/10/logo.png" class="attachment-full size-full" alt="" srcset="https://www.dpowercool.com/demo/wp-content/uploads/2017/10/logo.png 1865w, https://www.dpowercool.com/demo/wp-content/uploads/2017/10/logo-300x65.png 300w, https://www.dpowercool.com/demo/wp-content/uploads/2017/10/logo-1024x223.png 1024w, https://www.dpowercool.com/demo/wp-content/uploads/2017/10/logo-768x168.png 768w, https://www.dpowercool.com/demo/wp-content/uploads/2017/10/logo-1536x335.png 1536w, https://www.dpowercool.com/demo/wp-content/uploads/2017/10/logo-600x131.png 600w" sizes="(max-width: 1865px) 100vw, 1865px" width="1865" height="407"></a></div></div></div></div><div class="wpb_column vc_column_container vc_col-sm-10" style=" text-align:center; "><div class="vc_column-inner vc_custom_1578392527606"><div class="wpb_wrapper"><!-- **Searchform** -->
<form method="get" id="searchform" action="https://www.dpowercool.com/demo/">
    <input id="s" name="s" type="text" value="Enter Keyword" class="text_input" onblur="if(this.value==''){this.value='Enter Keyword';}" onfocus="if(this.value =='Enter Keyword') {this.value=''; }">
    <a href="javascript:void(0)" class="dt-search-icon"> <span class="fa fa-close"> </span> </a>
	<input name="submit" type="submit" value="Go">
</form><!-- **Searchform - End** --></div></div></div></div></div></div></div></div><div class="vc_row-full-width vc_clearfix"></div><div class="vc_row wpb_row vc_row-fluid vc_custom_1578392684410 vc_row-has-fill"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div data-menu="main-new" id="dt-1578392585897-5a4e2af3-279b" class="dt-header-menu mega-menu-page-equal  vc_custom_1578392716749 right" data-nav-item-divider="none" data-nav-item-highlight="none" data-nav-item-display="simple"><div class="menu-container"><ul id="menu-main-new" class="dt-primary-nav" data-menu="main-new"> <li class="close-nav"></li> <li id="menu-item-13327" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13327 dt-menu-item-13327 "><a href="https://www.dpowercool.com/demo/about-us/" class="item-has-icon icon-position-left"><span>ABOUT</span></a></li>
<li id="menu-item-13329" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13329 dt-menu-item-13329 "><a href="https://www.dpowercool.com/demo/service/" class="item-has-icon icon-position-left"><span>SERVICE</span></a></li>
<li id="menu-item-13328" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13328 dt-menu-item-13328 "><a href="https://www.dpowercool.com/demo/product/" class="item-has-icon icon-position-left"><span>PRODUCT</span></a></li>
<li id="menu-item-13330" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13330 dt-menu-item-13330 "><a href="https://www.dpowercool.com/demo/contact-us/" class="item-has-icon icon-position-left"><span>CONTACT</span></a></li>
</ul> <div class="sub-menu-overlay"></div></div></div><div id="dt-1578392585897-5a4e2af3-279b-mobile" class="mobile-nav-container mobile-nav-offcanvas-right" data-menu="main-new">  <div class="menu-trigger menu-trigger-icon" data-menu="main-new"><i class="fa fa-bars"></i><span>Menu</span>  </div>  <div class="mobile-menu" data-menu="main-new"><ul id="menu-main-new" class="dt-primary-nav" data-menu="main-new"> <li class="close-nav"></li> <li id="menu-item-13327" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13327 dt-menu-item-13327 "><a href="https://www.dpowercool.com/demo/about-us/" class="item-has-icon icon-position-left"><span>ABOUT</span></a></li>
<li id="menu-item-13329" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13329 dt-menu-item-13329 "><a href="https://www.dpowercool.com/demo/service/" class="item-has-icon icon-position-left"><span>SERVICE</span></a></li>
<li id="menu-item-13328" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13328 dt-menu-item-13328 "><a href="https://www.dpowercool.com/demo/product/" class="item-has-icon icon-position-left"><span>PRODUCT</span></a></li>
<li id="menu-item-13330" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13330 dt-menu-item-13330 "><a href="https://www.dpowercool.com/demo/contact-us/" class="item-has-icon icon-position-left"><span>CONTACT</span></a></li>
</ul></div>  <div class="overlay"></div></div></div></div></div></div></div>        </div>
    </header>
Tags:

2

Answers


  1. 0

    change the div width to from 2 to 12 vc_column_container

     From: wpb_column vc_column_container vc_col-sm-2
 To: wpb_column vc_column_container vc_col-sm-12

    And also add some padding to search box on mobile view using;

    @media (max-width: 768px)
#s {
    padding: 10px;
}
    Login or Signup to reply.
  2. 0

    Add the follows CSS snippet in your available styles css file –

    @media only screen and (max-width: 768px) {
    .vc_row.wpb_row.vc_custom_1578387376355 .wpb_column {
        margin-bottom: 0;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search