This question already has an answer here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
Closed 1 year ago.
I am trying to make my navigation bar responsive. When I resize my browser to test, the nav bar does collapse but the button is not visible. I tried to set the nav bar background as bg-dark but the button will still be invisible.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cuppela</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div id="nav-menu">
<nav id="main-nav" class="navbar navbar-expand-md fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</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>
</div>
<div class="container-fluid" id="top-main">
<div id="top_text">
<h1>Cuppela Made With Sugar</h1>
<p style="font-size: x-large;">Delicious Homemade Cakes</p>
</div>
</div>
<div id="best-sellers "class="container">
<h2>Best Sellers</h2>
<hr>
<div id="best-seller-cakes" class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/chocolate_cake.jpg">
<h4>Good<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/red_velvet_cake.jpeg">
<h4>Awesome<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/strawberry_cake.jpg">
<h4>Great<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/cake_seven.jpg">
<h4>Delicious<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
</div>
</div>
</body>
</html>
This is my css:
body{
margin: 0px;
}
li a:hover {
background-color: #ff9900;
border-radius: 10px;
}
li a{
color: white !important;
}
.nav-link{
padding: 0 0 .2rem
}
#top-main{
background-image: url(../images/cake_six_two.jpg);
height: 100vh;
}
#nav-menu{
font-size: medium;
position: relative;
}
#top_text{
color: white;
text-align: center;
position: relative;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
h1{
font-size: 500%;
text-align: center;
}
h2{
text-align: center;
}
#best-sellers{
text-align: center;
}
#best-seller-cakes{
text-align: center;
}
h4
{
font-size: x-large;
font-weight: bold;
font-family: Georgia, 'Times New Roman', Times, serif;
}
Edit: Removed webpage link as link no longer exists
Resulting change - The issue is in your HTML.
Add this two classes to the <nav> </nav> element in your HTML more details cna be found on the bootsrap page.
navbar-dark bg-dark
or the result will be -
<nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
by changing these two classes or modify their properties you can change the behavior. And don't override the bootstrap classes, add your own to override the CSS properties you need to change
Add this Class navbar-dark bg-transparent
<nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-transparent">
your issue is on the a css file called_transitions.scss
I have looked at your code and I found out you have a css rule that will set the navbar's display property to none when it goes below 750 width-pixels
Try looking at this file and either edit it to just compress your navbar or try removing the code
on the code, this is the part that makes your navbar not visible when scaling
.collapse {
&:not(.show) {
display: none;
}
}
You actually apply transparent background and border css on Collapse button, this is the reason why collapse button not visible.
Goto line no 109 on _navbar.scss file and you will find below CSS.
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
}
Just replace background-color: transparent; to background-color: white;
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid white;
border-radius: .25rem;
}
I hope it'll resolve your issue. Thank You
Related
I am troubling in navbar positioning.
My navbar items are disappeared after creating the image below. I have tried to adjust the position of elements but still doesn't work:((
I m also trying to making a fixed-top navbar, it doesn't work too:((
I am bad in positioning, hope someone can show me how to solve the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.carousel-item{
height:32rem;
background:url(https://picsum.photos/200/300);
color:white;
position:relative;
top:0;
}
.container{
position:absolute;
bottom: 0;
left: 0;
right:0;
padding-bottom: 50px;
}
nav{
min-height: 6vh;
background-color: black;
position: fixed;
top: 0;
overflow: hidden;
width: 100%;
}
nav .navbar-nav{
position:relative;
}
nav .navtoggler .navbar-toggler-icon{
background-color: white;
color:lightgray;
margin-left: 0px;
}
nav .logo{
font-size: 2em;
text-decoration: none;
color:white;
font-weight:bolder;
font-family:Arial, Helvetica, sans-serif;
}
nav .collapse a{
font-weight: bold;
font-size: medium;
color:lightgrey;
text-transform: uppercase;
text-decoration: none;
text-align: center;
word-spacing: 1px;
}
nav .collapse a:hover{
color:hotpink;
}
nav .navbar-nav ul{
list-style: none;
}
nav .nav-link{
display:flex;
width:30%;
letter-spacing: 1px;
word-spacing: 10px;
}
nav .btn{
border:1px solid hotpink;
color:white;
}
nav .btn:hover{
color:hotpink;
}
.main{
margin-top: 30px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-lightdark my-3">
<div class="container ">
<a class="logo " href="index.html" aria-current="page">
<img src="img/logo.png" alt="Logo" style="width:50px; height:55px;"class="d-inline-block mt-2">Fit Fit Fitness
</a>
<button class="navbar-toggler navbar-light bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<!--Related links to other aspects of the website(only for design purpose, not part of the project) -->
<ul class="navbar-nav ms-auto mb-2">
<li class="nav-item">
<a class="nav-link" href="#fp-section2-thelatest">TheLatest</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fp-section3-workout">Workout</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Food&Nutrition</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Athlete&Celebrities</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Apparel&Gear</a>
</li>
</ul>
<button class="btn btn-small" type="submit">Search</button>
</div>
</div>
</nav>
<main role="main">
<div class="carousel-item active">
<div class="container">
<span class="carousel-artCategory">Food & Nutrition › Weight Loss</span>
<h1 class="carousel-artTitle">Four Easy Change Ups You Can Do Today To Burn More Fat</h1>
<p>
<span class="carousel-artCite">By Train
<time datetime="2017-02-14"> 14 Jul, 2022</time>
</span>
</p>
Read
<a></a>
</div>
</div>
</main>
</body>
</html>
I have tried to insert keyword " fixed-top" into the class of nav, but it doesn't working:((
Besides,
When using position:absolute; the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, meaning changing it to position:sticky; or removing the line entirely in the container class should fix your issue.
I want to change the height and background color of the <hr> tag in HTML. Although the height and color change, but it seems the background color opacity is reducing slightly. Why is this happening?
My Code:
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
How can I get the original color and why is this problem happening? I am using the current version of Chrome (Windows 10).
Edited
I get such output in the browser when I run the whole code:
My whole code:
<!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.0">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: url(./images/bg-masthead.jpg) no-repeat center center/cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
In your reboot.scss you have an hr style with opacity:.25;.
Add:
hr {
opacity:1;
}
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#ff0000;">
<!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.0">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
/*background: url(./images/bg-masthead.jpg) no-repeat center center/cover;*/
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
#header-texts-1 {
font-size: 50px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
hr {
opacity:1;
}
/* ========================= Responsive ========================= */
#media (min-width: 992px) {
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light menu" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center py-5" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 10%; margin: auto; height: 10px; border: none; color:#f24516; background-color:#f24516;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
You have a reboot.css in bootstrap file that has opacity: .25, so you have to reset your hr by adding opacity: 1 to it
I've been having trouble and I'm when I searched the web, I couldn't find the solution to this.
I'm currently using bootstrap to create my website, but when I shrink the page down to mobile/tablet-sized, my navbar list shifts to the left. I want it center-aligned, but ONLY when the screen is small. Otherwise, I want my list to be on the right.
I've included a code sample below:
HTML:
<title>ZebarWorld Landing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class = "container-fluid">
<div class ="navbar-header">
<a class="navbar-brand" href="#"><img src="LogoPurple.png"></a>
</div>
<span class="navbar-text">
We're currently under construction.<br>Join our waitlist to be the first to play at Zebra World!
</span>
<ul class="nav navbar-nav myNav">
<li><a class="navi" href="#">Sign Up for Updates!</a></li>
</ul>
</div>
</nav>
</body>
CSS:
html,body{
background-color: #EE870D;
width:100%;
height:100%;
>}
.navbar{
background-color: #FFFFFF;
margin-top: 30px;
}
.navbar-header{
}
.navbar-brand{
}
.navbar-brand img{
max-width:100%;
width: 300px;
height: auto;
}
.navbar-text{
text-align:center;
}
.navbar-nav{
border-radius: 25px;
background: #A12F2F;
padding: 10px;
}
.myNav{
text-align: center;
}
.myNav li{
float:none;
display:inline-block;
}
a.navi{
text-decoration: none;
}
a.navi:link{
color:white;
}
a.navi:visited{
color: white;
}
a.navi:hover{
color: black;
}
a.navi:target{
color: red;
}
https://jsfiddle.net/0jpsyot2/1/
You should use these classes justify-content-center justify-content-md-between on container tag
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid justify-content-center justify-content-md-between">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="LogoPurple.png"></a>
</div>
<span class="navbar-text">
We're currently under construction.<br>Join our waitlist to be the first to play at Zebra World!
</span>
<ul class="nav navbar-nav myNav">
<li><a class="navi" href="#">Sign Up for Updates!</a></li>
</ul>
</div>
</nav>
By my suggestion you can use the media query in this code
#media (max-width: 645px){
.nav{
margin-left: 50%;
}
}
in this code i use you nav class and apply media query on this.
or you can also use justify-content-center bootstrap class to centralized your button.
1- Your kind Advise guys please as I tried many times with no hope (Using Bootstrap 4)
Header Section refused to follow (d-flex justify-content center classes as normal!!! as I want to center the text of hungry...... and all those texts.
2- Font Awesome has a weird thing (first to see) .. I want to make a circle around it like that logo but while Inspect I found SVG???
#import url('https://fonts.googleapis.com/css?family=Lato|Montserrat|Roboto&display=swap');
body{
font-family: 'Lato', sans-serif;
}
input[type="text"]{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #c0c0c0;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
header .container{
padding: 35px 20px 0;
max-width: 950px;
}
nav a{
text-transform: uppercase;
}
i{
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding:10px;
color: red;
}
.bg-dark{
background-color: #343a4000!important;
}
.navbar-brand{
text-transform: capitalize;
}
.navbar-dark .navbar-brand{
font-size: 1.5rem;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(255, 255, 255);
font-size: 1rem;
}
header{
background: url('https://images.unsplash.com/uploads/1412198485051133af17f/5049dacb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80') no-repeat center center/cover;
min-height: 724px;
color: #fff;
}
.showcase-text h1{
font-size: 3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Animate CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
<!-- FontAwesome -->
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<!-- Wow.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js">
<!-- Hover.css Lib -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<link rel="stylesheet" href="css/app.css">
<title>Cairo Eat | Best Restaurants in Egypt at your Hand</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#"><span><i class="fas fa-utensils food-icon mr-1"></i> </span> CairoEat</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 justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link" href="#">Sign Up <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
<li class="nav-item">
</li>
</ul>
</div>
</nav>
<div class="container text-center d-flex flex-column justify-content-center">
<h1>Hungry? Find the food you're looking for.</h1>
<p>Your city's best eats, ready to be ordered online.</p>
<input type="text" placeholder=" City or Address">
<!-- <input type="submit" value="Search" class="btn btn-danger p-2 pl-3 pr-3"> -->
<button type="submit" class=" btn btn-danger p-2 pl-3 pr-3">Search</button>
</div>
</header>
</body>
</html>
For your first question follow the below answer:
As I saw your code there is a typo in line 49 where you declare the div classes
<div class="container tex-center d-flex flex-column justify-content-center">
the tex-center is incorrect and it should be text-center.
so the result should be like this:
<div class="container text-center d-flex flex-column justify-content-center">
For your second question you can do the followings:
First of all, you can add a class to your span like this:
<span class="icon"><i class="fas fa-utensils food-icon"></i> </span>
And create a style for it like this:
span.icon {
color: #343a40;
background-color: white;
border: 1px solid white;
border-radius: 50%;
padding: 5px;
margin: 0 5px;
}
Note: I just add a simple class="icon" for better illustration you can name it whatever you want as long as you keep changing the style class name also.
UPDATE
For solving your first issue there are several things you can do, to resolve the issue follow the instruction below:
Giving d-flex to the header tag
nav.navbar {
top: 0;
width: 100%;
}
<header class="d-flex flex-column justify-content-center position-relative">
<nav class="navbar navbar-expand-md navbar-dark bg-dark position-absolute">
...
</nav>
...
</header>
NOTE: ... is to illustrate your other items into the relative div and you should put your other items instead of them.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>James McGill</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">J.M</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Hello there!</h1>
<h3>My name is James McGill and I'm a front-end web developer.</h3>
</div>
</section>
<div class="wrapper">
<h1>My skills</h1>
<br><br>
<h2>HTML</h2>
<div>90%</div>
<h2>CSS</h2>
<div>70%</div>
<h2>Javascript</h2>
<div>60%</div>
<h2>jQuery</h2>
<div>55%</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
width: 100%;
padding: 0;
}
body {
background-image: url("https://cdn-images-1.medium.com/max/2000/1*M6iNwOtplNTw1EOTcUklkQ.png");
background-size: cover; /*This makes the image cover the whole page space*/
background-position: center;
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.intro {
height: 100%;
width: 100%;
}
nav .navbar-nav li a {
color: white !important;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.navbar-brand {
color: white !important;
}
.content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.5);
}
Hey guys,
if you view my site on your browser you will see that as you scroll down the 'h1' which says "My skills" is located just before the start of the next page.
https://codepen.io/JamesMcGill/pen/KGNEWd On codepen it's even worse.
I am having a difficult time trying to figure out why this is happening.
Well, technically it is not on the same page. However, it does appear within the same background image as the contents on the main welcoming page.
Please, give me some suggestions on how I might be able to address this issue.
Thank you..
You applied the background-image to the body element, which will cause it to fill the screen. If you want it to only cover the first section, you should apply the background-image rule to that specific section.
It is doubling up at the bottom because background-repeat: repeat is the default and you have not declared an alternative. If you want if to fill the screen, you can add background-size: cover, or simply add background-repeat: no-repeat to prevent the doubling.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat