css - 如何最小化 Wordpress 的 super 菜单和搜索框上方和下方的空间？

Question

我正在使用带有 Elementor 和 Mega Menu 插件的 Wordpress 主题。正如我在桌面和移动 View 的图片中提到的那样，我想调整搜索框和大型菜单之间的空间。谁能告诉我该怎么做？

这是网站的 live URL

这是期望的结果:

<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>

Answer 1

将 div 宽度从 2 更改为 12 vc_column_container

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

并且还使用移动 View 向搜索框添加了一些填充；

@media (max-width: 768px)
#s {
    padding: 10px;
}