我正在使用 HTML、CSS 和 Bootstrap4。我需要一个在滚动时应该固定的导航栏。我做了所有事情，但稍微滚动后，导航栏再次无法修复。我想知道是否有任何方法可以用 bootstrap 解决这个问题，但如果不能，请告诉我如何处理 Css。谢谢
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}<!-- In the name GOD who gave me this power -->
<!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">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand"/>
<meta name="description" content="H&M clothing shop"/>
<meta name="author" content="Ali Bolouki"/>
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg"/>
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app"/>
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app"/>
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo"/>
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon"/>
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon"/>
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" 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 mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon"/>
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
</main>
<!--Bootstrap4-->
<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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>请运行我的代码并向下滚动以查看我想说的内容。
答案 0 :(得分：0)
正文和 html 的高度不应为 100%。 看起来这是导致粘性导航仅停留在页面的一部分的问题。我添加了一个边框和一些额外的空间来演示粘性 div 如何根据正文中的滚动位置在 position: relative 和 position: fixed 之间交替：
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}<!-- In the name GOD who gave me this power -->
<!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">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" 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 mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>要解决这个问题，只需删除高度值：
body, html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
根据w3schools，粘性被定义为：
<块引用>元素根据用户的滚动位置定位 A 粘滞 元素在相对和固定之间切换，取决于滚动 位置。它是相对定位的，直到给定的偏移位置是 在视口中相遇 - 然后它“固定”到位（如位置：固定）。
注意：IE/Edge 15 或更早版本不支持。在 Safari 中支持从 带有 -webkit- 前缀的 6.1 版。
带有边框和额外空间的完整代码片段以演示结果：
body,
html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}<!-- In the name GOD who gave me this power -->
<!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">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" 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 mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>