Question

尝试将导航栏移到标题图像下方。当我将其移动到图像下方时，它会留出较大的空白，或者它会消失在标题图像后面。我从各种来源尝试了几种不同的CSS技巧，以尝试获得所需的内容。正如我说的那样，它只是移至底部或停留在顶部或消失在标题图像的后面。

    body {
	padding: 0;
	margin: 0;
	background: #f2f6e9;
    }

    /*--- navigation bar ---*/

    .navbar {
	background: #6ab446;
    }

    .nav-link,
    .navbar-brand {
   	color: #fff;
	cursor: pointer;
    }

    .nav-link {
	  margin-right: 1em !important;
    }

    .nav-link:hover {
	color: #000;
    }

    .navbar-collapse {
	justify-content: flex-end;
    }


    /*--- header ---*/

    .header {
  	background-image: url('images/logo2w5.png');
	background-size: contain;
	background-position: top center;
	position: relative;
	background-repeat:no-repeat;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler navbar-dark" type="button" data toggle="collapse" data-target="#main-navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main-navigation">
    <ul class="navbar-nav">
    <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
    </li>
    </ul>
    </div>
    </nav>

    <header class="page-header header container-fluid">

    </header>

上面的代码只是将导航栏放在标题图像的顶部。

Answer 1

我希望这个示例对您有帮助

body {
padding: 0;
margin: 0;
background: #f2f6e9;
}

/*--- navigation bar ---*/

.navbar {
background: #6ab446;
}

.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}

.nav-link {
  margin-right: 1em !important;
}

.nav-link:hover {
color: #000;
}

.navbar-collapse {
justify-content: flex-end;
}


/*--- header ---*/

.header {
background-image: url('images/logo2w5.png');
background-size: contain;
background-position: top center;
position: relative;
background-repeat:no-repeat;
padding: 0 !important;
margin: 0 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
<header class="page-header header container-fluid">
<img src="https://via.placeholder.com/1500x400" alt="img" width="100%" />
</header>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>


</body>
</html>

是否有代码将导航栏移动到标题图形下方？

1 个答案: