关闭图标未放置在正确的位置

时间：2018-09-26 09:55:51

标签： css bootstrap-4

我正在尝试将导航栏图标打开时将其更改为关闭。但显示效果不佳。我需要MENU旁边的图标。我在CSS下面使用关闭图标。我有三个跨度的单杠。我隐藏中间的条，并旋转第一个和第三个将其转换为闭合符号。但显示位置不正确。如果我设置.navbar-toggler span显示值块。它看起来仍然很糟糕，但是在这一点上，我能够看到我的三个横条。如何增加navbar-toggler的大小，以便可以并排查看菜单和图标？其次是如何修复图标从其位置移开的问题。我也希望在关闭合拢前后，将图标放在同一位置。

.navbar {
	border-top: 2px solid #C66FF4;
	width: 100%
}

@media (min-width: 768px) {
    nav .navbar .navbar-custom {
        background: rgba(0,0,0,0);
    }
  }

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: 0;
}

.navbar-toggler span {
   display: inline;
   background-color: #fff;
   height: 3px;
   width: 25px;
   margin-top: 4px;
   margin-bottom: 4px;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   position: relative;
   left: 0;
   opacity: 1;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
   -webkit-transition: transform .35s ease-in-out;
   -moz-transition: transform .35s ease-in-out;
   -o-transition: transform .35s ease-in-out;
   transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    position: absolute;
    left: 12px;
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    position: absolute;
    left: 12px;
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}
.bg-dark {
    background-color: #343a40;
}
@media only screen and (min-width: 768px) {
  nav.bg-dark {
    background-color: white !important;
    
  }
  .navbar-dark .navbar-nav .nav-link {
    background: none;
    border: 0;
    bottom: auto;
    box-sizing: border-box;
    color: #666 !important;
    font-family: Poppins;
    font-size: 12px;
    height: auto;
    left: auto;
    line-height: 1;
    margin: 0;
    min-height: auto;
    max-height: none;
    opacity: 1;
    outline: none;
    overflow: visible;
    position: relative;
    text-align: center !important;
    text-decoration: none;
    }
}
nav.navbar-dark {
    border-top: 2px solid #343a40;
    border-bottom: 2px solid #343a40;
    width: 100%;
}
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head> 

<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-custom">
<!--Brand in navigation menu-->     
  <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
     Menu
	<span> </span>
    <span> </span>
    <span> </span>	
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav">

      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
          </ul>

  </div>
</nav>
</html>

1 个答案:

答案 0 :(得分：-1)

是您想要这样的东西。 编辑：更新

.navbar {
  border-top: 2px solid #C66FF4;
  width: 100%
}

.navbar-toggler {
  display: inline-block;
}

.menuIcon {
  float: right;
  display: block;
  position: relative;
}

.menuText {
  display: block;
  float: left;
  margin-right: 10px;
  line-height: 25px;
}

@media (min-width: 768px) {
  nav .navbar .navbar-custom {
    background: rgba(0, 0, 0, 0);
  }
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: 0;
}

.navbar-toggler span {
  display: block;
  background-color: #fff;
  height: 3px;
  width: 25px;
  margin-top: 4px;
  margin-bottom: 4px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  position: relative;
  left: 0;
  opacity: 1;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
  -webkit-transition: transform .35s ease-in-out;
  -moz-transition: transform .35s ease-in-out;
  -o-transition: transform .35s ease-in-out;
  transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
  position: absolute;
  right: 25px;
  top: 8px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
  height: 12px;
  visibility: hidden;
  background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
  position: absolute;
  right: 25px;
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  opacity: 0.9;
}

.bg-dark {
  background-color: #343a40;
}

@media only screen and (min-width: 768px) {
  nav.bg-dark {
    background-color: white !important;
  }
  .navbar-dark .navbar-nav .nav-link {
    background: none;
    border: 0;
    bottom: auto;
    box-sizing: border-box;
    color: #666 !important;
    font-family: Poppins;
    font-size: 12px;
    height: auto;
    left: auto;
    line-height: 1;
    margin: 0;
    min-height: auto;
    max-height: none;
    opacity: 1;
    outline: none;
    overflow: visible;
    position: relative;
    text-align: center !important;
    text-decoration: none;
  }
}

nav.navbar-dark {
  border-top: 2px solid #343a40;
  border-bottom: 2px solid #343a40;
  width: 100%;
}
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-custom">
  <!--Brand in navigation menu-->
  <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  <div class="menuIcon">
  <span> </span>
    <span> </span>
    <span> </span>	
    </div>
    <div class="menuText">Menu</div>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav">

      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
    </ul>

  </div>
</nav>

</html>

相关问题
最新问题