Как сделать так, чтобы lo go перекрывал панель навигации в bootstrap? - PullRequest
Новая
       0

Как сделать так, чтобы lo go перекрывал панель навигации в bootstrap?

0 голосов
/ 10 марта 2020

У меня есть панель навигации в bootstrap, в центре которой находится изображение lo go. Я бы хотел, чтобы изображение было больше и простиралось за пределы панели навигации, но вместо этого панель навигации просто растягивалась, чтобы соответствовать размеру lo go. Вот так: 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>

Что мне нужно сделать, чтобы сделать наложение lo go так, как я этого хочу? Огромное спасибо, если кто-нибудь может понять это!

Ответы [ 3 ]

0 голосов
/ 10 марта 2020

Другим решением будет использование абсолютной позиции в сочетании с установленным вручную значением 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

0 голосов
/ 10 марта 2020

Я использовал ваш код jsfiddle, вернул его сюда и переместил lo go. Он находится над значком меню на маленьких экранах, но вы можете переместить любой из них в соответствии с вашим стилем дизайна.

Я дал lo go более высокий z-индекс 2, чтобы поместить его над меню, и использовал CSS Трюки с левым полем 50%, а затем с отрицательным полем тот же самый отрицательный процент, но в пикселях по центру lo go. Используемый верх: 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>
0 голосов
/ 10 марта 2020

Вам нужно использовать z-index для lo go, так что оно придет поверх navbar. Вот решение 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...