I have a bootstrap 4 website (https://sedomadrid2021.com) which has a navbar, the navbar has an odd issue on apple mobile devices: On the home page the navbar does not seem able to push all the content down and some of the menu gets overlapped by the content placed below, on the "ponentes" page, the content just doesn't get pushed down.
This is my home html:
<body>
<div class="outer">
<nav class="navegacion navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="https://sedomadrid2021.com">
<img src="/img/logo.png" alt="logo" height="110px">
</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 mx-auto">
<li class="nav-item active mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/ponentes">Ponentes<span class="sr-only"></span></a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/CartaSEDO.pdf">Infórmate</a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btninscrib" href="https://atlanta.eventszone.net/myCongress/form.php?thisFormCongress=sedo21&thisFormLanguage=es">Inscríbete</a>
</li>
</ul>
</div>
</nav>
<div class="contenedor-principal">
<div class="contenedor-texto-principal">
<span class="texto-titulo-principal">
¿Te lo vas<br>a perder?<br>
</span>
<span class="texto-parrafo-principal">
<br>El 67º congreso de la sedo 2021 en Madrid congregará a los mejores profesionales de la ortodoncia de España en un evento de reencuentro cooperación y conocimiento
</span>
</div>
<div class="contenedor-bocadillo">
<img class="fondo-bocadillo" src="/img/bocadillo.png" alt="fondo-texto">
<span class="texto-bocadillo">Que no te<br>lo cuenten</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
this is my "ponentes" page html:
<body>
<div class="outer">
<nav class="navegacion navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="https://sedomadrid2021.com">
<img src="/img/logo.png" alt="logo" height="110px">
</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 mx-auto">
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/ponentes">Ponentes<span class="sr-only"></span></a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btnreg" href="https://sedomadrid2021.com/CartaSEDO.pdf">Infórmate</a>
</li>
<li class="nav-item mr-5 ml-5">
<a class="nav-link btninscrib" href="https://atlanta.eventszone.net/myCongress/form.php?thisFormCongress=sedo21&thisFormLanguage=es">Inscríbete</a>
</li>
</ul>
</div>
</nav>
<div class="contenedor-ponentes">
<div class="titulo-precongreso">
<h2>Precongreso</h2>
</div>
<div class="row">
<div class="col-sm-6">
<img class="imgponente" src="/img/ponentes/pre-ewaczochrowska.jpg" alt="Ewa Czochrowska">
<h4>Ewa Czochrowska</h4>
</div>
<div class="col-sm-6">
<img class="imgponente" src="/img/ponentes/pre-rafiromano.jpeg" alt="Rafi Romano">
<h4>Rafi Romano</h4>
</div>
</div>
<div class="titulo-congreso">
<h2>Congreso</h2>
</div>
<div class="row fila1congreso">
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/wassimbouzid.jpeg" alt="Wassim Bouzid">
<h4>Wassim Bouzid</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/luiscarriere.jpeg" alt="Luis Carriere">
<h4>Luis Carriere</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/tommasocastroflorio.jpeg" alt="Tomasso Castroflorio">
<h4>Tomasso Castroflorio</h4>
</div>
</div>
<div class="row fila2congreso">
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/alvaroferrando.jpeg" alt="Alvaro Ferrando">
<h4>Álvaro Ferrando</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/raulferrando.jpeg" alt="Raul Ferrando">
<h4>Raúl Ferrando</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/alejandroramirez.jpeg" alt="Alejandro Ramirez">
<h4>Alejandro Ramírez</h4>
</div>
</div>
<div class="row fila2congreso">
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/pabloramirez.jpeg" alt="Pablo Ramirez">
<h4>Pablo Ramirez</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/jeanlouisraymond.jpeg" alt="Jean Louis Raymond">
<h4>Jean Louis Raymond</h4>
</div>
<div class="col-sm-4">
<img class="imgponente-cong" src="/img/ponentes/arturovela.jpeg" alt="Arturo Vela">
<h4>Arturo Vela</h4>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
And this is my CSS
#font-face {
font-family: "Rotunda-Regular";
src: url(fonts/RotundaRegular.otf) format("opentype");
}
#font-face {
font-family: Rotunda-ExtraBoldItalic;
src: url(fonts/RotundaExtraBoldItalic.otf) format("opentype");
}
#font-face {
font-family: Rotunda-Light;
src: url(fonts/RotundaLight.otf) format("opentype");
}
body{
background-color: #fff;
}
.outer{
display: flex;
flex-flow: column;
height: 100%;
}
.navegacion{
margin-right: 8%;
margin-left: 8%;
margin-top: 4%;
background-color: #fff !important;
}
.navegacion li{
font-family: "Rotunda-Regular";
text-transform: uppercase;
color: #141b4d;
font-size: 1.35em;
}
.contenedor-principal{
flex-grow : 1;
background-image: url(/img/fondo-lg.png);
background-size: cover;
background-repeat: no-repeat;
}
.contenedor-texto-principal{
position: absolute;
left: 8%;
width: 20%;
top: 30%;
}
.texto-titulo-principal{
font-family: "Rotunda-ExtraBoldItalic";
font-size: 3em;
line-height: 1.25em;
color: #f2827f;
}
.texto-parrafo-principal{
font-family: "Rotunda-Light";
font-size: 1.25em;
color: #666666;
}
.fondo-bocadillo{
position: absolute;
z-index: 10001;
height: 250px;
}
.contenedor-bocadillo{
width: 20%;
position: absolute;
z-index: 10000;
left: 70%;
top: 65%;
}
.texto-bocadillo{
padding-left: 4%;
padding-top: 20%;
position: absolute;
color: #ffc845;
font-family: "Rotunda-ExtraBoldItalic";
font-size: 3em;
text-align: center;
z-index: 10002;
}
.btninscrib{
font-family: "Rotunda-ExtraBoldItalic";
color: #f2827f !important;
background-color: #7248bd;
border-radius: 15px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px !important;;
padding-right: 30px !important;
}
.btnreg{
padding-top: 20px !important;
}
.contenedor-ponentes{
margin-right: 7%;
margin-left: 7%;
margin-bottom: 5%;
text-align: center;
}
.imgponente{
width: 55%;
}
.titulo-precongreso{
color: #f2827f;
font-family: "Rotunda-ExtraBoldItalic";
padding-top: 2%;
padding-bottom: 3%;
}
.titulo-precongreso h2{
font-size: 3em !important;
}
.titulo-congreso{
color: #34a798;
font-family: "Rotunda-ExtraBoldItalic";
padding-top: 6%;
padding-bottom: 2%;
}
.titulo-congreso h2{
font-size: 3em !important;
}
.imgponente-cong{
width: 60%;
}
.fila2congreso{
padding-top: 5%;
}
.contenedor-ponentes h4{
font-family: "Rotunda-Regular";
padding-top: 5%;
}
#media (min-width: 320px) and (max-width: 768px) {
.contenedor-ponentes{
position: relative;
}
.contenedor-principal{
background-image: url(/img/fondo-sm.png);
background-size: cover;
}
.contenedor-texto-principal{
position:relative;
width: 80%;
left: 8%;
top: 20%;
}
.contenedor-bocadillo{
width: 80%;
left: 3%;
top: 120%;
}
.fondo-bocadillo{
height: 250px;
}
}
As I've mentioned, this issue is only happening on mobile apple devices. On android phones, windows desktops and apple desktops, everything is looking fine. This is a very simple webpage, you are able to navigate and visit the site directly if you want to replicate the issue.
Quick reply before looking into it more: this issue is also happening on Windows 10 using latest Firefox by just resizing the browser window. So it is not a Apple mobile issue only.
Possible fix:
So what I can see is that you are using position: absolute quite a lot on the main page. This seems to be breaking the dropdown menu (for good reasons).
Maybe change those to something else, because the absolute is what it says: absolute. Meaning it will stay where it is, no matter what happens around it.
solution: The issue was because I was placing the navbar inside the "outer" div which is a flex div.
Related
In the picture below you can see that my Skills text is in the section where it is not supposed to be which is the home-section
In the above picture, you can see that Skills has appeared in the section of the home. Note that I used Bootstrap row to style my content
Below is the html code ------- <-- I added bootstrap -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/29ea37403a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="home-section">
<nav class="navbar navbar-expand-lg navbar-light">
<h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="home-contect">
<h1 class="home-title">I have software development experience</h1>
<h5 class="home-description">
Hi! I'm a software developer - Developing elegant mobile sofwares
for companies all over the world
</h5>
<div class="button-con">
<button
type="button"
class="home-button btn btn-lg btn-warning download-button"
>
Let's Talk <i class="fa-solid fa-paper-plane"></i>
</button>
<button
type="button"
class="home-button btn btn-lg btn-outline-warning download-button">
Resume <i class="fa-solid fa-arrow-down"></i>
</button>
</div>
<div class="links">
<h6>Check Out My
<div class="home-icon-container" id="github"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-linkedin-in"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-twitter"></i> </div>
</h6>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<img
class="personal-photo"
src="assets/portfolio-image.png"
alt="A picture of me"
/>
</div>
</div>
</section>
<section title="skill-section">
<h1>Skills</h1>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Below is my css styling
/* Home Section */
#home-section{
padding-left: 10%;
padding-right: 10%;
}
h1{
text-align: left;
font-size: xxx-large;
}
.personal-photo{
position: absolute;
margin-left: 11%;
}
.btn{
margin-top: 15px;
}
.home-description{
text-align: left;
padding: 2% 0;
}
.home-button{
margin-right: 4px;
}
.home-icon{
color: black;
}
.home-icon-container#github{
margin-left: 20px;
}
.home-icon-container{
margin-top: 15px;
margin-right: 13px;
padding: 11px;
border-radius: 100%;
background-color: #dcedc8;
display: inline-block;
}
/* skill-section */
#skill-section{
background-color: gold;
padding: 5% 10%;
}
/* media-queries */
#media (min-width: 500){
.personal-photo{
width: 0px;
}
}
#media (max-width: 768px){
h1.home-title{
text-align: center;
}
.home-description{
text-align: center;
}
.button-con{
text-align: center;
}
.links{
text-align: center;
}
.personal-photo{
width: 50%;
}
}
The image has a display property of 'absolute'. MDN.
It may need more of a margin to avoid covering up the text, but you're probably better off using a different way to position the image instead of using absolute.
I am trying to create my own portfolio website. Everything was fine since I tried to put the ib image with the text that says Ib student. I tried to use bootstrap box model first, that doesn't work. Then I tried using float, but that also didn't work. Text always shows at the top of the page and if I try to change its position with position: absolute when I resize the page its position gets to somewhere I don't want. To sum up, how can I put these together
How it looks like:
body {
text-align: center;
color: #FFF5FD;
}
header {
background-color: #FF96AD;
}
header h1 {
color: #FFF5FD;
font-family: 'Dancing Script', cursive;
font-size: 6rem;
padding-top: 16px;
}
header img {
width: 16%;
border-radius: 60%;
margin-top: 30px;
min-width: 200px;
}
.navbar-brand {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 3px;
}
.capton {
font-size: 1.3rem;
margin-top: 18px;
font-family: 'Spartan', sans-serif;
font-weight: 600;
}
.ib {
width: 6%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<header id="home">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#home">Batı Gözen</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" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">My Work</a>
<a class="nav-link" href="#">CV</a>
</div>
</div>
</div>
</nav>
<img src="https://via.placeholder.com/300.jpg/" alt="My Picture">
<h1>Batı Gözen</h1>
<p class="capton">"Web Developer, Video Editor"</p>
<div class="row row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1">
<div class="col">
<img src="https://via.placeholder.com/400.jpg/" alt="IB" class="ib">
</div>
<div class="col">
<h3> IB Student, 12.th Grade</h3>
</div>
</div>
</header>
<section id="resume">
<h3>My Resume</h3>
</section>
<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">
body {
text-align: center;
color: #FFF5FD;
}
header {
background-color: #FF96AD;
}
header h1 {
color: #FFF5FD;
font-family: 'Dancing Script', cursive;
font-size: 6rem;
padding-top: 16px;
}
header img {
width: 16%;
border-radius: 60%;
margin-top: 30px;
min-width: 200px;
}
.navbar-brand {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 3px;
}
.capton {
font-size: 1.3rem;
margin-top: 18px;
font-family: 'Spartan', sans-serif;
font-weight: 600;
}
.ib {
width: 6%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<header id="home">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#home">Batı Gözen</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" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">My Work</a>
<a class="nav-link" href="#">CV</a>
</div>
</div>
</div>
</nav>
<img src="https://via.placeholder.com/300.jpg/" alt="My Picture">
<h1>Batı Gözen</h1>
<p class="capton">"Web Developer, Video Editor"</p>
<!--<div class="row row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1">
<div class="col">
<img src="https://via.placeholder.com/400.jpg/" alt="IB" class="ib">
</div>
<div class="col">
<h3> IB Student, 12.th Grade</h3>
</div>
</div>-->
<div class="row">
<div class="col d-flex">
<img class="ms-auto" src="https://via.placeholder.com/400.jpg/" alt="IB" class="ib">
</div>
<div class="col d-flex">
<h3 class="my-auto me-auto"> IB Student, 12.th Grade</h3>
</div>
</div>
</header>
<section id="resume">
<h3>My Resume</h3>
</section>
<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">
Maybe you want this type of result.
To get this result I have commented out your code snippet and insert mine check that out. Also you can customize left and right using the ms-auto and me-auto to adjust the margin in the left nad right.
I'm using Bootstrap for my navigation bar, and somehow I keep getting whitespace on the right side of the logo image. My navigation code looks like this:
.navbar {
background-color: white;
opacity: 80%;
font-size: 0.8em;
}
.nav-link a {
color: black;
}
.nav-item img {
width: 110px;
margin-top: 8px;
margin-left: 10px;
margin-right: 20px;
}
.nav-item a {
color: black;
}
.navButtons {
background-color: white;
color: black;
padding: 6px;
font-size: 12px;
}
.navButtons:hover {
color: black;
text-decoration: none;
}
<style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</style>
<nav class="navbar fixed-top navbar-expand-sm navbar-light">
<a class="navbar-brand" href="index.html" style="margin:0;">
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo" style="width: 50%;">
</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="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="button navButtons" href="about.html"> Biography <span class="sr-only">(current)</span> </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="interiorDesigns.html"> Interior Design </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="arts.html"> Arts </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="blogs.html"> Blogs </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="contact.html"> Contact </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<div class="form-group mb-4">
<input type="search" placeholder="Search" class="form-control form-control-underlined">
</div>
</form>
</div>
</nav>
And this is what my logo looks like, the yellow part is where I want to get rid of. I tried changing the padding, margin, and width, but none worked.:
In your Example the Anchor tag is is a block element/parent container of the image.
Apply width and padding-right(if required) to the navbar-brand.
Then instead of adding 50% width make it 100% to the img tag inside.
This will fix your issue.
Example Code (last two lines) in CSS then tag:
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
width: 300px;
padding-right: 50px;
}
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo" style="width: 100%;">
there is a website that I came across and I was making a clone of it using html css and bootstrap. But I am facing problems like my navbar is not working out. I need help I need to center the items in the navbar in the center and the social icons on the right side. I am new to this thing can anyone please help me?
here's the website that I am trying to make a clone of
and here is my code
/* #navbarNav {
padding-bottom: 36px;
padding-top: 54px;
} */
.nav-img {
width: auto;
max-width: 100%;
max-height: 69px;
}
.navbar-custom {
background-color: #000000;
}
.title-div {
position: absolute;
z-index: 1;
top: 461px;
}
.home-heading {
background-color: rgba(255, 255, 255, 0.5);
color: black;
}
.main-image {
/* background-image: url(../img/ill.jpg); */
width: 100%;
height: 82%;
position: relative;
z-index: -1;
}
.navbar {
padding: 100px;
background-color: black;
}
.navbar-brand {
margin: 0px 0px 0px 30px;
}
.navbar-toggler {
filter: invert(100%);
}
.navbar-nav li {
float: left;
}
.nav-item a {
display: block;
text-align: center;
}
.instagram {
filter: invert(100%);
padding: 6px;
}
.facebook {
filter: invert(100%);
padding: 6px;
}
.email {
filter: invert(100%);
padding: 6px;
}
.phone-call {
filter: invert(100%);
}
/* .mid{
margin: 0px 0px 0px 200px;
padding: 0px 0px 0px 235px;
} */
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #000;
}
li {
float: left;
/* border-right: 1px solid #bbb; */
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.logo {
/* width: 133px;
height: 69px; */
width: auto;
max-width: 100%;
max-height: 69px;
margin-top: 9px;
margin-bottom: 17px;
margin-left: 16px;
}
.bdy-img{
width: 45% !important;
height: auto !important;
padding-top: 96px;
padding-left: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght#300&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-custom " >
<img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center" >
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo-nav.jpg" class="logo" alt="" loading="lazy" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="cintainer-fluid">
<div class="row">
<div class="span6" style=" float: none; margin: 0 auto;">
<ul class=" navbar-nav ">
<li>
<a class="nav-link" href="">Shop</a>
</li>
<li>
<a class="nav-link" href=""> I Love Lables</a>
</li>
<li>
<a class="nav-link" href=""> About</a>
</li>
<li>
<a class="nav-link" href=""> How It Works</a>
</li>
<ul class="list2">
<li>
<a class="nav-link" href=""> Charities</a>
</li>
<li>
<a class="nav-link" href=""> Sell With Us</a>
</li>
<li>
<a class="nav-link" href=""> News</a>
</li>
<li>
<a class="nav-link" href=""> Designers</a>
</li>
</ul>
<ul class="list3">
<li>
<a class="nav-link" href=""> Contact</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/email.png" class="email" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="main-bdy-div align-items-center" >
<div class="container-fluid title-div home-heading">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
</div>
<div class="container-fluid title-div " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
<img class="main-image" src="img/ill.jpg" alt="">
</div> -->
<div class="main-img">
<img class="main-image" src="img/ill.jpg" alt="">
</div>
<div class="container-fluid justify-content-start">
<div class="container-fluid title-div " style=" text-align: center; width: 28%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
</h1>
</div>
<div class="container-fluid title-div justify-content-between " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
<h1 class=""
style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
</div>
<!-- main body section -->
<div class="container-fluid">
<div>
<img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
height: auto;" alt="">
<div class="d-flex align-items-start justify-content-end">
<h1 style="text-align: center;">Our Unique Approach.</h1>
</div>
</div>
</div>
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>
Please view the snippet in full page mode.
I have only tried to help in what you have asked, there are still some issues which I have not tried to solve as you are trying to learn.
Below are the changes:
1 Added justify-content-md-center in below tag
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
2 Adjusted above tag's children to have two ul only
3 added ml-auto css class in above two ul tags
/* #navbarNav {
padding-bottom: 36px;
padding-top: 54px;
} */
.nav-img {
width: auto;
max-width: 100%;
max-height: 69px;
}
.navbar-custom {
background-color: #000000;
}
.title-div {
position: absolute;
z-index: 1;
top: 461px;
}
.home-heading {
background-color: rgba(255, 255, 255, 0.5);
color: black;
}
.main-image {
/* background-image: url(../img/ill.jpg); */
width: 100%;
height: 82%;
position: relative;
z-index: -1;
}
.navbar {
padding: 100px;
background-color: black;
}
.navbar-brand {
margin: 0px 0px 0px 30px;
}
.navbar-toggler {
filter: invert(100%);
}
.navbar-nav li {
float: left;
}
.nav-item a {
display: block;
text-align: center;
}
.instagram {
filter: invert(100%);
padding: 6px;
}
.facebook {
filter: invert(100%);
padding: 6px;
}
.email {
filter: invert(100%);
padding: 6px;
}
.phone-call {
filter: invert(100%);
}
/* .mid{
margin: 0px 0px 0px 200px;
padding: 0px 0px 0px 235px;
} */
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #000;
}
li {
float: left;
/* border-right: 1px solid #bbb; */
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.logo {
/* width: 133px;
height: 69px; */
width: auto;
max-width: 100%;
max-height: 69px;
margin-top: 9px;
margin-bottom: 17px;
margin-left: 16px;
}
.bdy-img {
width: 45% !important;
height: auto !important;
padding-top: 96px;
padding-left: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-custom " >
<img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center" >
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo-nav.jpg" class="logo" alt="Logo Img" loading="lazy" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
<ul class=" navbar-nav ml-auto">
<li>
<a class="nav-link" href="">Shop</a>
</li>
<li>
<a class="nav-link" href=""> I Love Lables</a>
</li>
<li>
<a class="nav-link" href=""> About</a>
</li>
<li>
<a class="nav-link" href=""> How It Works</a>
</li>
<li>
<a class="nav-link" href=""> Charities</a>
</li>
<li>
<a class="nav-link" href=""> Sell With Us</a>
</li>
<li>
<a class="nav-link" href=""> News</a>
</li>
<li>
<a class="nav-link" href=""> Designers</a>
</li>
<li>
<a class="nav-link" href=""> Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/email.png" class="email" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="main-bdy-div align-items-center" >
<div class="container-fluid title-div home-heading">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
</div>
<div class="container-fluid title-div " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
<img class="main-image" src="img/ill.jpg" alt="">
</div> -->
<div class="main-img">
<img class="main-image" src="img/ill.jpg" alt="">
</div>
<div class="container-fluid justify-content-start">
<div class="container-fluid title-div " style=" text-align: center; width: 28%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
</h1>
</div>
<div class="container-fluid title-div justify-content-between " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
New Zealand's Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
</div>
<!-- main body section -->
<div class="container-fluid">
<div>
<img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
height: auto;" alt="">
<div class="d-flex align-items-start justify-content-end">
<h1 style="text-align: center;">Our Unique Approach.</h1>
</div>
</div>
</div>
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
You could use 'justify-content-center' class to align list items to center:
<ul class="nav justify-content-center">
and 'nav justify-content-end' to align items to right:
<ul class="nav justify-content-end">
https://getbootstrap.com/docs/4.4/components/navs/
<body>
<div class="sts-viewport-fill">
<nav role="navigation" class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Knonet</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=#>Log In</a></li>
<li><a href=#>Sign Up</a></li>
<li><a href=#>Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<h1 class="text-center">CONNECT WITH EVERYONE.<br>
<small>Knonet aims to connect the whole world with the Internet.</small>
</h1>
</div>
</div>
<div class="container sts-second-slide">
Salut, et Bonjour!
</div>
</body>
That there's my HTML. I've applied a bunch of CSS rules like so:
body {
font-family: 'Source Sans Pro', 'Segoe UI Light', sans-serif;
font-weight: initial;
font-weight: 100;
}
.sts-viewport-fill {
position: absolute;
top:0;right:0;bottom:0;left:0;
background-color: #000000;
color: #ffffff;
}
.sts-viewport-fill .container-fluid h1 {
margin: 250px auto 100px auto;
font-weight: 900;
}
.navbar-collapse, nav [type="button"] {
border: none !important;
border-radius: 0%;
}
.sts-second-slide {
margin-top: 100px;
}
As far as I'm concerned, this makes the div.sts-viewport-fill fit the entire viewport of the screen, or at least what's left of it.
The problem? See all that French there? Salut, et Bonjour!?
It does not appear in the browser. Observe:
Can somebody tell me what's going one here? I have a really strong feeling this has something to do with the position: absolute; and top:0;bottom:0; rules.
Merci d'Avance!
PS: Even if I apply a color: #fff; attribute to the .sts-second-slide selector, I still don't get a result.
You have to add position to that element.
Try
.sts-second-slide {
margin-top: 100px;
position: relative;
}