如何在引导程序中使徽标与导航栏重叠？

时间：2020-03-10 04:31:56

标签： html css twitter-bootstrap

我在引导程序中有一个导航栏，它的徽标图像居中。我希望图像更大并且延伸到导航栏之外，但是导航栏只是延伸以适合徽标的大小。像这样： example.

这是我的导航栏代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
    <ul class="navbar-nav ml-auto text-center">
      <li class="nav-item active">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
  <div class="mx-auto my-2 order-0 order-md-1 position-relative">
    <a class="mx-auto" href="#">
      <img src="http://placehold.it/120/ccff00" class="rounded-circle" height="120" width="120">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
  </div>
  <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
    <ul class="navbar-nav mr-auto text-center">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

我需要做些什么来使徽标重叠如我所愿？非常感谢任何人都能弄清楚！

3 个答案:

答案 0 :(得分：0)

您需要使用z-index进行徽标，因此它将显示在导航栏的顶部，这是解决方法

body {
background: url('webb-dark.png') no-repeat center center fixed;
height: auto;
overflow-y:hidden;
}

@media (min-width: 992px) {
    .navbar {
        height:50px;
    }
}

.logo {
position: absolute;
left: 50%;
left: -50%;
z-index:2;

}
<html>
	<head>
		<title>TITLE</title> 
		
		
		

	</head>
	<body background="webb-dark.png">
		<!-- Uhh maybe move this to CSS. -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/main.css">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark position-relative">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    >
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="http://placehold.it/120/ccff00" class="logo" height="120" width="120">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container-fluid">
<div class="row h-100">
	<!-- "sm-0" makes the main column full width on mobile. may or may not work so please test before leaving it. -->
 	<div class="col-3 sm-0 md-0" >  </div>
 	<div class="col-6 sm-12 md-12 bg-secondary"> 
 		<br/><br/>
 		<p class = "text-center">
 			Hi. This is a test paragraph to align the text and whatnot. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


 		</p>
 	 </div>
 	<div class="col-3 sm-0 md-0">  </div>
</div>
</div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	</body>
</html>

答案 1 :(得分：0)

另一种解决方案是将绝对位置与手动设置的left值结合使用，具体取决于您希望元素位于何处。 

.main-logo {
  left: 50%;
  top: 0;
  margin-left: -60px !important;
}

.navbar-collapse:first-child {
  padding-right: 90px;
}

.navbar-collapse:last-child {
  padding-left: 90px;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="m-0 order-0 order-md-1 position-absolute main-logo">
        <a class="mx-auto" href="#">
            <img src="http://placehold.it/120/ccff00" class="rounded-circle" height="120" width="120">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

https://codepen.io/terryeah/pen/NWqXYOO

答案 2 :(得分：0)

我使用了您的jsfiddle代码并将其带回此处并重新定位了徽标。它位于小屏幕上的菜单图标上方，但是您可以根据自己的设计风格移动其中一个。

我给徽标设置了更高的z-index值2，以使其位于菜单上方，并使用CSS Tricks技巧将左边距留给了50％，然后使用了负边距给了相同的负百分比，但以像素为中心使徽标居中。二手最高：0。

新CSS：

.logo {
     position: absolute;
     left: 50%;
     margin-left: -50px;
     height: 100px;
     top: 0;
     z-index: 2;
}


body {
background: url('webb-dark.png') no-repeat center center fixed;
height: auto;
overflow-y: hidden;
}

@media (min-width: 992px) {
    .navbar {
        height:50px;
        padding-top: 0;
        overflow: visible;
    }
}

.logo {
position: absolute;
left: 50%;
margin-left: -50px;
height: 100px;
top: 0;
z-index: 2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/main.css">

<html>
	<head>
		<title>TITLE</title> 
		
		
		

	</head>
	<body background="webb-dark.png">
		<!-- Uhh maybe move this to CSS. -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/main.css">

        <a class="mx-auto" href="#">
            <img src="http://placehold.it/120/ccff00" class="logo" height="120" width="120">
        </a>
        
<nav class="navbar navbar-expand-lg navbar-dark bg-dark position-relative">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    >
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container-fluid">
<div class="row h-100">
	<!-- "sm-0" makes the main column full width on mobile. may or may not work so please test before leaving it. -->
 	<div class="col-3 sm-0 md-0" >  </div>
 	<div class="col-6 sm-12 md-12 bg-secondary"> 
 		<br/><br/>
 		<p class = "text-center">
 			Hi. This is a test paragraph to align the text and whatnot. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


 		</p>
 	 </div>
 	<div class="col-3 sm-0 md-0">  </div>
</div>
</div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	</body>
</html>

相关问题
最新问题