Something really strange happening, I am using the right classes and style to center my h1 and paragraph. The div with my col-12 that contains the H1 and the other col-12 that contains the paragraph should be close one to another in the center of the Row div.
Why it is not working even tho I am using justify-content center and align-items center? Thank you!
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: pink;
}
.red-b{border: 4px solid red;}
.blue-b{border: 4px solid blue;}
.yellow-b{border: 4px solid yellow;}
.green-b{border: 4px solid green;}
.orange-b{border: 4px solid orange;}
.black-b{border: 4px solid black;}
/* HEADER */
.main-header{
background-image: url('header-photo.jpg');
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.main-header a{
color: #fff;
}
.header-banner{
height: 80vh;
}
h1{
color: white;
font-size: 100px;
text-align: center;
font-weight: 700;
}
#media only screen and (max-width: 1200px) {
h1{
color: red;
}
}
#media only screen and (max-width: 992px) {
h1{
color: yellow;
font-size: 70px;
}
}
/*MAIN*/
/*FOOTER*/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">START BOOTSTRAP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="header-banner row justify-content-center align-items-center blue-b">
<div class="col-12 red-b">
<h1>YOUR FAVORITE SOURCE OF FREE BOOTSTRAP THEMES</h1>
</div>
<div class="col-12 yellow-b">
<p class="header-paragraph text-center">lorem ipsum blablabla Montreal Canada</p>
</div>
</div> <!-- /.row -->
</div><!-- /.container -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You need to consider align-content-center (https://getbootstrap.com/docs/4.1/utilities/flex/#align-content)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: pink;
}
.red-b{border: 4px solid red;}
.blue-b{border: 4px solid blue;}
.yellow-b{border: 4px solid yellow;}
.green-b{border: 4px solid green;}
.orange-b{border: 4px solid orange;}
.black-b{border: 4px solid black;}
/* HEADER */
.main-header{
background-image: url('header-photo.jpg');
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.main-header a{
color: #fff;
}
.header-banner{
height: 80vh;
}
h1{
color: white;
font-size: 100px;
text-align: center;
font-weight: 700;
}
#media only screen and (max-width: 1200px) {
h1{
color: red;
}
}
#media only screen and (max-width: 992px) {
h1{
color: yellow;
font-size: 70px;
}
}
/*MAIN*/
/*FOOTER*/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">START BOOTSTRAP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="header-banner row justify-content-center align-items-center blue-b align-content-center">
<div class="col-12 red-b">
<h1>YOUR FAVORITE SOURCE OF FREE BOOTSTRAP THEMES</h1>
</div>
<div class="col-12 yellow-b">
<p class="header-paragraph text-center">lorem ipsum blablabla Montreal Canada</p>
</div>
</div> <!-- /.row -->
</div><!-- /.container -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
I have a section in my header named #contact-stripe that has a space/gap between it and the navbar. However, I don't see anywhere that has padding or margin so I'm stumped.
I put this on CodePen which may make it easier to see.
I've used Chrome's inspect to try and find anything that is using margin/padding and just can't find it.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Raleway:400,400i,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Listing Naples</title>
</head>
<body>
<header>
<!-- Contact Stripe -->
<section id="contact-stripe">
<div class="container">
<span class="float-left"><i class="fas fa-envelope"></i> Email Us</span>
<span class="float-right">
<div class="telephone align-middle">
<i class="fas fa-phone d-sm-inline-block align-middle"></i>
<span class="telephone-number d-sm-inline-block align-middle">(239) 248-8171</span>
</div>
</span>
<ul class="social">
<li class="align-middle"><i class="fab fa-facebook-square"></i></li>
<li class="align-middle"><i class="fab fa-twitter-square"></i></li>
<li class="align-middle"><i class="fab fa-instagram"></i></li>
<li class="align-middle"><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</section>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Buying</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Selling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 ml-4 my-lg-0">
<input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
</form>
</div><!-- end collapse navbar-collapse div-->
</div><!-- end container div -->
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
padding:0;
}
#contact-stripe {
background-color: #000;
border-bottom: 1px solid #353a3b;
color: rgba(255, 255, 255, 0.5);
}
ul.social{
text-align:center;
list-style-type:none;
}
ul.social li {
display:inline-block;
border-right:1px solid #353a3b;
}
ul.social li:first-of-type {
border-left: 1px solid #353a3b;
}
.telephone {
background-color:red;
}
.telephone-number {
background: teal;
}
.navbar-custom {
background-color:#000;
}
header li {
padding: .5rem;
margin:0;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
font-weight:400;
font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link, .navbar-custom li:hover {
color: white;
background-color: orange;
}
.active {
background-color: orange;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lora', sans-serif;
}
h1 {
font-size: 1.8rem;
font-weight: bold;
}
Because your ul.social has a margin-bottom of 1rem.
just add this css to fix:
ul.social {
margin-bottom: 0;
}
I am using bootstrap 3 navbar functionality. The navbar is working fine when not collapsed but when the nabar collapses, the button is not at all working and not showing the menu option. I really dont understand what is causing this problem. I tried figuring it out but couldnt find any solution. Any help would be greatly appreciated. When I use computer path to refer the bootstrap files then toggle button is not working but when i use web address its working. Can anybody please help me on this
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Jobs 4 U
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javscript" src="jquery-1.11.3.min.js"></script>
<script type="text/javscript" src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
.mt-top{
margin-top:75px;
}
.mt-top1{
margin-top:325px;
}
.vertical-center-row{
display:table-cell;
vertical-align: middle;
}
.colht1{
height:100px;
border: 5px solid yellow;
}
.navbar-custom {
background-color:#ffffff;
color:#ffffff;
border-radius:0;
padding:10px;
}
.ht{
height:300px;
}
h2,h3{
text-align: center;
}
sup{
color:red;
}
.bck{
background-image: url('images/job_index.jpg');
background-repeat:no-repeat;
background-size: cover;
height:600px;
}
.abtpad{
padding:5px;
margin-bottom:10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Jobs 4u</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">How it Works</li>
<li class="">
<a class="" href="JobSeeker.php">Jobseeker</a>
</li>
<li class="">
<a class="" href="Employer.php">Employer</a>
</li>
<li class="">
<a class="" href="contactus.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Having trouble with my navbar. On the non-mobile version (or when browser is expanded), I would like the hover on links to have a background color filled in height of the navbar instead it is only coloring partially.
Please let me know how I can have full bg color on the hovering of each link. Thank you!
a,
a:visited,
a:hover,
a:active {
color: inherit;
}
/* Navigation Bar */
.navbar {
background-color: #303030;
}
.navbar-nav a {
color: #ffffff;
text-align: center;
}
.navbar .navbar-nav>a:hover,
.navbar .navbar-nav>a:focus {
color: #ffffff;
background-color: yellow;
}
/*Mobile menu icon color*/
.navbar .navbar-toggler {
border-color: rgb(255, 255, 255);
}
.navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* Branding Dimension for Mobile */
.navbar-brand img {
width: 125px;
height: 29px;
}
#media (min-width: 576px) {
.navbar-brand img {
width: 195px;
height: 45px;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="assets\css\style.css">
<title>Street Scents</title>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="assets/img/logo-text.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Videos</a>
<a class="nav-item nav-link" href="#">Blog</a>
<a class="nav-item nav-link" href="#">Merch</a>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Just add the py-0 Bootstrap class to the Navbar to remove the top/bottom padding so that your custom hover color fills the height. To maintain the original height, add top/bottom padding to the nav-links.
https://www.codeply.com/go/4ZBnt0gWFc
<nav class="navbar navbar-expand-lg py-0">
<a class="navbar-brand" href="#">
<img src="assets/img/logo-text.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Videos</a>
<a class="nav-item nav-link" href="#">Blog</a>
<a class="nav-item nav-link" href="#">Merch</a>
</div>
</div>
</nav>
CSS to change link or hover color:
/* change the link color */
.navbar-nav .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
color: #ffffff;
}
Bootstrap 4
I got the problem, that the Logo in the header gets cut when I watch it in the Chrome developer tools for example in the responsive view Galaxy S5
I think the Logo Container is too big and needs to go after the navbar but I have no clue to do it so.
/* === Navigation ===*/
.navbar.navbar-dark button,
.navbar.navbar-dark button:focus,
.navbar.navbar-dark .nav-link {
color: #fff;
font-size: 0.9em;
font-weight: bold;
}
.navbar-dark {
background-color: #2e82b0;
}
.navbar {
min-height: 80px;
}
.navbar>.container {
border-bottom: 1px solid #fff;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 1.4em;
padding-bottom: 1.4em;
}
}
#media (min-width: 992px){
.navbar li {
margin-left : 1em;
margin-right : 1em;
font-size: 1.2em;
}
}
**CSS**
/* === Header ===*/
.hero-bg {
background-color: #2e82b0;
}
.img-logo {
max-width: 60%;
margin-top: 15%;
margin-bottom: 10%;
}
.line {
border-bottom: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Wichtige Meta Daten -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Navigation
============================================================================================= -->
<header>
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top py-0">
<div class="container">
<button class="navbar-toggler btn-round" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle">
<span class="icon-menu"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impression
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header
============================================================================================= -->
<!-- Header -->
<section id="home" class="hero-bg">
<div class="container line">
<div class="align-items-center row justify-content-center">
<div class="img-logo">
<img class="img-fluid mb-5 d-block mx-auto img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- Header -->
<!-- Scripts
============================================================================================= -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>
Whenever you use the fixed-top class for your navbar, you need to add the appropriate top margin and/or top padding to the container that follows your navbar. And don't use percentages for margin/padding in this case. Use rem units or px instead.
Here's a working example (click "run code snippet" below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header>
<!-- Start Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top py-0">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav">
<li class="nav-item">
Texting
</li>
<li class="nav-item">
Event Konzeption
</li>
<li class="nav-item">
Impression
</li>
<li class="nav-item">
Über mich
</li>
<li class="nav-item">
Kontakt
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- Ende Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg mt-5 pt-5">
<div class="container line">
<div class="align-items-center row justify-content-center">
<div class="img-logo col">
<img class="img-fluid mb-5 d-block mx-auto img-responsive" src="https://placehold.it/260x130" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- Header -->
Notice: This code snippet doesn't use any of your custom css and for spacing only the classes mt-5 pt-5 are used in this case.
Please tell me why the dropdown menu isn't functioning and the fa fa-search icon isn't showing within the search box.
The dropdown menu is not collapsing. And the Search icon from http://fortawesome.github.io/Font-Awesome/icon/search/ doesn't display within the search box as it should.
Your help is highly appreciated!
<!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">
<meta name="description" content="">
<meta name="author" content="X">
<link rel="icon" href="">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- NAVBAR ============================================== -->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigations</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div> <!-- Ende of Navbar Header -->
<div class="navbar-collapse collapse">
<div class="right-inner-addon pull-right">
<i class="fa fa-search"></i>
<input type="search" class="form-control" placeholder="search">
</div> <!-- End of Search -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact Us</li>
<li class="dropdown">
Community <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Social</li>
<li>Twitter</li>
<li>Facebook</li>
<li>LinkedIn</li>
<li>Blog</li>
</ul>
</li>
</ul>
</div> <!-- End of Navbar Collapse -->
</div> <!-- Ende of Navbar Container -->
</div> <!-- End of Navbar -->
</div> <!-- End of Container -->
</div> <!-- End of .navbar-wrapper -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
CSS
/* --- Navbar ----------------- */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
.right-inner-addon {
position: relative;
top: 8px;
right: 1px;
height: 3px;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px;
pointer-event: none;
}
/* --- Responsive CSS ----------------- */
#media (min-width: 768px) {
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container{
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
border-radius: 4px;
}
}
For the search issue, you need to put input-group-addon inside like so
<i class="input-group-addon fa fa-search"></i>
or preferably taken from the bootstrap website
<div class="input-group right-inner-addon pull-right">
<div class="input-group-addon">
<i class="input-group-addon fa fa-search">
</div>
<input type="search" class="form-control" placeholder="search">
</div> <!-- End of Search -->
For the dropdown, I am not sure, but my guess would be do you need dropdown class in li
instead of
can you try