白色间距出现在移动导航栏的两侧。这是由我创建的自定义 css 表(如下)引起的，因为最初 Logo 在某些浏览器类型上没有正确居中。
我相信这可能是由于 css 代码的初始行，但删除会取代菜单。
我想在不影响桌面菜单 View 的情况下移除移动设备查看的白色间隙。
/* custom css for sunplay */
header.main-header .mainbar-container .mainbar {
display: flex;
}
header.main-header .mainbar-container .mainbar .mainbar-row {
display: flex;
justify-content: center;
align-items: center !important;
margin: 0;
}
header.main-header .mainbar-container .mainbar .col-auto {
padding: 0px;
width: 100%;
}
header.main-header .mainbar-container .mainbar .col-auto .navbar-header {
display: flex;
justify-content: center;
align-items: center;
}
.lqd-css-sticky-wrap .ld-parallax-wrap.parallax-applied span.split-inner, .ld-parallax-wrap.parallax-applied span.split-inner {
transform: translateY(0px) !important;
}
@media(max-width: 480px){
.ld-parallax-wrap .lqd-lines.split-unit .split-inner{
font-size: 53px !important;
letter-spacing: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#3ed2a7">
<link rel="shortcut icon" href="./favicon.png" />
<title>Sun play</title>
<link rel="stylesheet" href="https://use.typekit.net/yza0jhh.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/liquid-icon/liquid-icon.min.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/font-awesome/css/brands.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/font-awesome/css/solid.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/css/theme-vendors.min.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/css/theme.min.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/css/themes/restaurant.css" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<!-- Head Libs -->
</head>
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-align="left" data-mobile-nav-style="classic" data-mobile-nav-shceme="gray" data-mobile-header-scheme="gray" data-mobile-nav-breakpoint="1199">
<div id="wrap">
<header class="main-header main-header-overlay">
<div class="mainbar-wrap">
<div class="megamenu-hover-bg"></div><!-- /.megamenu-hover-bg -->
<div class="container mainbar-container">
<div class="mainbar">
<div class="row mainbar-row align-items-lg-stretch">
<div class="col-auto">
<div class="collapse navbar-collapse" id="main-header-collapse">
<ul id="primary-nav" class="main-nav nav main-nav-hover-fade-inactive align-items-lg-stretch justify-content-lg-start" data-submenu-options='{ "toggleType":"fade", "handler":"mouse-in-out" }'>
<li>
<a href="index.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Home
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="about.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
About Us
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li class="menu-item-has-children">
<a href="#">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Services
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
<ul class="nav-item-children">
<li>
<a href="property.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Property Management
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="leasing.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Leasing
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="leasing2.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Resale
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="concierge.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Concierge
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
</ul>
</li>
</ul><!-- /#primary-nav -->
</div><!-- /#main-header-collapse -->
<div class="navbar-header">
<a class="navbar-brand" href="index.html" rel="home">
<span class="navbar-brand-inner">
<img class="mobile-logo-default" src="http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/Sunplay_Homepage_Menu_03.png" srcset="http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/Sunplay_Homepage_Menu_03.png 1x" alt="Ave HTML Template">
<img class="logo-default" src="http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/Sunplay_Homepage_Menu_03.png" srcset="http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/Sunplay_Homepage_Menu_03.png 1x" alt="Ave HTML Template">
</span>
</a>
<button type="button" class="navbar-toggle collapsed nav-trigger style-mobile" data-toggle="collapse" data-target="#main-header-collapse" aria-expanded="false" data-changeclassnames='{ "html": "mobile-nav-activated overflow-hidden" }'>
<span class="sr-only">Toggle navigation</span>
<span class="bars">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
</button>
</div><!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="main-header-collapse">
<ul id="primary-nav" class="main-nav nav main-nav-hover-fade-inactive align-items-lg-stretch justify-content-lg-start" data-submenu-options='{ "toggleType":"fade", "handler":"mouse-in-out" }'>
<li>
<a href="restaurant.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Dining
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="fitness.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Fitness
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="membership.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Memberships
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
</ul><!-- /#primary-nav -->
</div><!-- /#main-header-collapse -->
</div><!-- /.col -->
</div><!-- /.mainbar-row -->
</div><!-- /.mainbar -->
</div><!-- /.mainbar-container -->
</div><!-- /.mainbar-wrap -->
</header><!-- /.main-header -->
<main id="content" class="content">
<section
class="vc_row lqd-css-sticky bg-cover bg-center fullheight d-flex align-items-center py-5"
data-parallax="true"
data-parallax-options='{"parallaxBG":true}'
data-slideshow-bg="true"
data-slideshow-options='{"delay":2500,"imageArray":["http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/slide1_index.jpg","http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/slide2_index.jpg","http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/slide3_index.jpg"]}'>
<span class="row-bg-loader"></span>
<div class="liquid-row-overlay bg-black opacity-03"></div>
<div class="container">
<div class="row">
<div class="lqd-space" style="height: 180px;"></div>
<div
class="lqd-column col-md-12 text-center px-lg-12"
data-custom-animations="true"
data-ca-options='{"triggerHandler":"inview", "animationTarget":"all-childs", "duration":1600, "delay":250, "easing":"easeOutQuint", "direction":"forward", "initValues":{"opacity":0, "translateY":800 }, "animations":{"opacity":1, "translateY":-97}}'
data-parallax="true"
data-parallax-from='{"translateY":1}'
data-parallax-to='{"translateY":-150}'
data-parallax-options='{"easing":"linear","reverse":true,"triggerHook":"onEnter", "overflowHidden": false}'>
<h2
class="mt-70 mb-70 text-white lh-115" style="margin-bottom: 200px;"
data-fittext="true"
data-fittext-options='{"compressor":0.75,"maxFontSize":"64","minFontSize":"48"}'
data-split-text="true"
data-split-options='{"type":"lines"}'>
Sunplay Club Bangsaray </h2>
<!-- <br> excutive summary</h2>
<a
href="#"
class="btn btn-solid text-uppercase btn-lg border-thin btn-white py-1 px-2"
data-localscroll="true"
data-localscroll-options='{"scrollBelowSection":true}'>
<span>
<span class="btn-txt">TEXT</span>
</span>
</a>
<div class="lqd-space" style="height: 120px;"></div>
<p
class="text-uppercase text-white font-size-12 ltr-sp-3"
data-split-text="true"
data-split-options='{"type":"lines"}'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<a class="text-white" href="#">find us at</a>
</p>
</div><!-- /.lqd-column col-md-10 col-md-offset-1 -->
</div><!-- /.row -->
</section>
</footer><!-- /.main-footer -->
</div><!-- /#wrap -->
<script src="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/jquery.min.js"></script>
<script src="http://www.checkoutchiangmai.com/sunplay/demo/assets/js/theme-vendors.js"></script>
<script src="http://www.checkoutchiangmai.com/sunplay/demo/assets/js/theme.min.js"></script>
<script src="http://www.checkoutchiangmai.com/sunplay/demo/assets/js/liquidAjaxMailchimp.min.js"></script>
</body>
</html>
Run code snippet最佳答案
您需要在自定义代码之后添加以下 CSS
@media(min-width: 320px) and (max-width: 767px) {
header.main-header .mainbar-container .mainbar .mainbar-row {
width: 100%;
}
header.main-header .mainbar-container .mainbar .col-auto {
padding: 0px !important;
}
}
在 header.main-header .mainbar-container .mainbar .mainbar-row 中添加 width: 100% 并添加 padding: 0px !important; 在 header.main-header .mainbar-container .mainbar .col-auto
注意 !important 不推荐，但在你的情况下，在 theme.min.css 中 .main-header .mainbar-row > [class^=col] 提到了 padding-left: 15px !important 和 padding-right: 15px !important。所以需要覆盖它。这就是为什么我放 padding: 0 !important;
希望对您有所帮助。
/* custom css for sunplay */
header.main-header .mainbar-container .mainbar {
display: flex;
}
header.main-header .mainbar-container .mainbar .mainbar-row {
display: flex;
justify-content: center;
align-items: center !important;
margin: 0;
}
header.main-header .mainbar-container .mainbar .col-auto {
padding: 0px;
width: 100%;
}
header.main-header .mainbar-container .mainbar .col-auto .navbar-header {
display: flex;
justify-content: center;
align-items: center;
}
.lqd-css-sticky-wrap .ld-parallax-wrap.parallax-applied span.split-inner,
.ld-parallax-wrap.parallax-applied span.split-inner {
transform: translateY(0px) !important;
}
@media(max-width: 480px) {
.ld-parallax-wrap .lqd-lines.split-unit .split-inner {
font-size: 53px !important;
letter-spacing: 0;
}
}
@media(min-width: 320px) and (max-width: 767px) {
header.main-header .mainbar-container .mainbar .mainbar-row {
width: 100%;
}
header.main-header .mainbar-container .mainbar .col-auto {
padding: 0px !important;
}
}<link rel="stylesheet" href="https://use.typekit.net/yza0jhh.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/liquid-icon/liquid-icon.min.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/font-awesome/css/brands.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/font-awesome/css/solid.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/css/theme-vendors.min.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/css/theme.min.css" />
<link rel="stylesheet" href="http://www.checkoutchiangmai.com/sunplay/demo/assets/css/themes/restaurant.css" />
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<!-- Head Libs -->
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-align="left" data-mobile-nav-style="classic" data-mobile-nav-shceme="gray" data-mobile-header-scheme="gray" data-mobile-nav-breakpoint="1199">
<div id="wrap">
<header class="main-header main-header-overlay">
<div class="mainbar-wrap">
<div class="megamenu-hover-bg"></div>
<!-- /.megamenu-hover-bg -->
<div class="container mainbar-container">
<div class="mainbar">
<div class="row mainbar-row align-items-lg-stretch">
<div class="col-auto">
<div class="collapse navbar-collapse" id="main-header-collapse">
<ul id="primary-nav" class="main-nav nav main-nav-hover-fade-inactive align-items-lg-stretch justify-content-lg-start" data-submenu-options='{ "toggleType":"fade", "handler":"mouse-in-out" }'>
<li>
<a href="index.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Home
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="about.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
About Us
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li class="menu-item-has-children">
<a href="#">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Services
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
<ul class="nav-item-children">
<li>
<a href="property.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Property Management
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="leasing.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Leasing
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="leasing2.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Resale
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="concierge.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Concierge
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
<!-- /#primary-nav -->
</div>
<!-- /#main-header-collapse -->
<div class="navbar-header">
<a class="navbar-brand" href="index.html" rel="home">
<span class="navbar-brand-inner">
<img class="mobile-logo-default" src="http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/Sunplay_Homepage_Menu_03.png" srcset="http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/Sunplay_Homepage_Menu_03.png 1x" alt="Ave HTML Template">
<img class="logo-default" src="http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/Sunplay_Homepage_Menu_03.png" srcset="http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/Sunplay_Homepage_Menu_03.png 1x" alt="Ave HTML Template">
</span>
</a>
<button type="button" class="navbar-toggle collapsed nav-trigger style-mobile" data-toggle="collapse" data-target="#main-header-collapse" aria-expanded="false" data-changeclassnames='{ "html": "mobile-nav-activated overflow-hidden" }'>
<span class="sr-only">Toggle navigation</span>
<span class="bars">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
</button>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="main-header-collapse">
<ul id="primary-nav" class="main-nav nav main-nav-hover-fade-inactive align-items-lg-stretch justify-content-lg-start" data-submenu-options='{ "toggleType":"fade", "handler":"mouse-in-out" }'>
<li>
<a href="restaurant.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Dining
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="fitness.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Fitness
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
<li>
<a href="membership.html">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Memberships
<span class="submenu-expander">
<i class="fab fa-angle-down"></i>
</span>
</span>
</span>
</a>
</li>
</ul>
<!-- /#primary-nav -->
</div>
<!-- /#main-header-collapse -->
</div>
<!-- /.col -->
</div>
<!-- /.mainbar-row -->
</div>
<!-- /.mainbar -->
</div>
<!-- /.mainbar-container -->
</div>
<!-- /.mainbar-wrap -->
</header>
<!-- /.main-header -->
<main id="content" class="content">
<section class="vc_row lqd-css-sticky bg-cover bg-center fullheight d-flex align-items-center py-5" data-parallax="true" data-parallax-options='{"parallaxBG":true}' data-slideshow-bg="true" data-slideshow-options='{"delay":2500,"imageArray":["http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/slide1_index.jpg","http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/slide2_index.jpg","http://www.checkoutchiangmai.com/sunplay/demo/assets/demo/preview/slide3_index.jpg"]}'>
<span class="row-bg-loader"></span>
<div class="liquid-row-overlay bg-black opacity-03"></div>
<div class="container">
<div class="row">
<div class="lqd-space" style="height: 180px;"></div>
<div class="lqd-column col-md-12 text-center px-lg-12" data-custom-animations="true" data-ca-options='{"triggerHandler":"inview", "animationTarget":"all-childs", "duration":1600, "delay":250, "easing":"easeOutQuint", "direction":"forward", "initValues":{"opacity":0, "translateY":800 }, "animations":{"opacity":1, "translateY":-97}}'
data-parallax="true" data-parallax-from='{"translateY":1}' data-parallax-to='{"translateY":-150}' data-parallax-options='{"easing":"linear","reverse":true,"triggerHook":"onEnter", "overflowHidden": false}'>
<h2 class="mt-70 mb-70 text-white lh-115" style="margin-bottom: 200px;" data-fittext="true" data-fittext-options='{"compressor":0.75,"maxFontSize":"64","minFontSize":"48"}' data-split-text="true" data-split-options='{"type":"lines"}'>
Sunplay Club Bangsaray </h2>
<!-- <br> excutive summary</h2>
<a
href="#"
class="btn btn-solid text-uppercase btn-lg border-thin btn-white py-1 px-2"
data-localscroll="true"
data-localscroll-options='{"scrollBelowSection":true}'>
<span>
<span class="btn-txt">TEXT</span>
</span>
</a>
<div class="lqd-space" style="height: 120px;"></div>
<p
class="text-uppercase text-white font-size-12 ltr-sp-3"
data-split-text="true"
data-split-options='{"type":"lines"}'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<a class="text-white" href="#">find us at</a>
</p>
</div><!-- /.lqd-column col-md-10 col-md-offset-1 -->
</div>
<!-- /.row -->
</section>
</footer>
<!-- /.main-footer -->
</div>
<!-- /#wrap -->
<script src="http://www.checkoutchiangmai.com/sunplay/demo/assets/vendors/jquery.min.js"></script>
<script src="http://www.checkoutchiangmai.com/sunplay/demo/assets/js/theme-vendors.js"></script>
<script src="http://www.checkoutchiangmai.com/sunplay/demo/assets/js/theme.min.js"></script>
<script src="http://www.checkoutchiangmai.com/sunplay/demo/assets/js/liquidAjaxMailchimp.min.js"></script>关于html - 导航栏周围的白色间距(仅限移动设备)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59098990/