Home > Net >  NEWB ALERT Nav Bar issue in which the section below is covering the navbar. Also need help learning
NEWB ALERT Nav Bar issue in which the section below is covering the navbar. Also need help learning

Time：09-22

Goodevening all.I am having trouble implementing my first bootstrap Nav bar. I have gotten it to succesfully work but my section that's right below it is overlaping the navbar (Im only able to see the navbar if i use a z-index of -1 but then the buttons in that section do not work). I have tried to change the heigh/width through css but am limited to how small I can make the section.

This is the problem i'm having: https://imgur.com/a/3CwLnK3

1st problem: You can see how the hero section goes over into the next area. Also how do i limit the margin on padding/margin on left and right of Hero section? I tried to adjust in css but it would not let me.

2nd problem: you can see how the img which is in the services section is not resizing itself to stay within the boxes (stars)

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <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">
        <title>FullSite</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>

    <body>
<!--Start of Bootstrap code-->
    <nav class="navbar navbar-expand-sm navbar-dark bg-info">
        <a href="#" class="navbar-brand">Astronomics</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <!--Data-toggle is used by bootstrap js to listen to clicks and open/close automatically. the data target has to matchet collapse target-->
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Users</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Products</a>
                </li>
            </ul>
        </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
        crossorigin="anonymous"></script>
    <!--End of Bootstrap code-->

    <!-- Start Hero Section -->
    <main>
    <section id="hero">
        <div class="hero container">
            <div class="hero-text">
               <h1><span>Welcome</span><br> 
                <span>To J.P.A</span><br>
                <h1><span>Investments</span></h1>
                <a href="#" type="button" class="cta">DAO Portfolio</a>
        </div>
        <div class="hero-text2">
               <h1><span>Join</span><br> 
                <span>Our</span><br>
                <h1><span>Vision</span></h1>
                <a href="#" type="button" class="cta">DAO WhitePapers</a>
        </div> 
        </main>      
    </section>
    <!-- End Hero Section --> 
    <!--SERVICE SECTION-->
    <section id="services">
        <!--<div class="service container"></div>-->
         <div class="service-top">
             <h1 class="section-title"><span>$Astro</span>nomical Future</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="service-bottom">
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </div>
                </div>

    </section>
</body>
</html>```


    @import url('https://fonts.googleapis.com/css2?family=IBM Plex Serif:wght@200&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-size: 21px;
    line-height: 28px;
  }
  
  a {
    text-decoration: none;
  }
  html{
    line-height: 1.15;
    text-size-adjust: 100%;
  }
  body {
    background: whitesmoke;
    margin: 0;  
    display: block;
    margin: 8px;
  }
  
nav {
  display: block;
}
  .container {
    width: min(80%, 1200px);
    margin: auto;
    min-height: 102vh;
    text-align: center;
    position: relative;
    top: -49px;
    height: 76%;
  }
  #mainl{
    width: 200px;
    height: 300px;
  }
  
  .hero {
    background: linear-gradient(95.78deg, rgb(69, 70, 110) 28.23%, rgb(21, 22, 74) 52.12%, rgb(61, 21, 66) 100%);
    z-index: 1;
    border: 2px solid #800000;
    display: grid;
    height: 50px; 
    width: 50%
  }
  
  .hero-text {
    color: #800000;
    display: inline-block;
    line-height: 1;
    margin: 5em auto;
    z-index: 1;
  }
  .hero-text2 {
    color: #800000;
    position: relative;
    top: 5px;
    z-index: 1;
  }
  span {
    display: inline-block;
    margin-right: auto;
  
    position: relative;
    font-size: clamp(1.5rem, 5vw   10px, 3rem);
    animation: reveal_anim 1s forwards;
  }
  #hero span::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  a {
    text-decoration: none;
  }
  
  .cta {
    display: inline-block;
    margin-right: auto;
    margin-top: 1em;
    padding: 0.2em 0.5em;
    font-size: clamp(1rem, 5vw, 2rem);
    border: 2px solid blue;
    animation: reveal_anim 1s forwards;
    animation-delay: 500ms;
    opacity: 0;
  
  }
/* End Hero Section */
/* Servicesss Section */
#services{
    flex-direction: column;
    text-align: center;
    font-size: 15px;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 100px 0;
    border-top: 5px;
    margin-top: 5px;
    /*this flex overrised the container style*/
}   
#services .section-title{
    font-size: 4rem;
    font-weight: 300;
    /*light weight*/
    color: #6f2a70;
    margin-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}
#services .section-title span{
    color:#800000;
    font-size: 3rem;
}
#services .section-title{
  color: black;
  font-size: 3rem;
}
#services .service-top p {
    font-size: 1.4rem;
    margin-top: 5px;
    line-height: 2.5rem;
    font-weight: 300px;
    letter-spacing: .05rem;
}
#services .service-bottom {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    
}
#services .service-item {
    flex-basis: 80%;
    display: fleq;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    background-image: url(./img/stars.jpg);
    background-size: cover;
    margin: 10px 5%;
}
#services .service-item::after{
  content:'';
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: .1;
  z-index: -1;
}
.icon img{
  position:relative;
  left: 425px;
}
#services .service-item p {
    color: #800000;
    font-size: 20px;
}
#services .service-item h2 {
  color: white;
  position: relative;
  font-size: 30px;
  top: -60px;
}
#services .service .container {
    margin: 10px;
}
/* End of Servicesss Section */
/*keyframes*/
@keyframes reveal_anim{
    0% {
        transform: translateX(50%);
    }
    50% {
        opacity:0.5;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

CodePudding user response：

The code is fine but consider changing the following styles

  1. Remove left:425px for the .icon img this will fix the star image alignment issue
  2. Remove top:-49px for the .container this will fix the menu overlap issue
  3. Remove height: 50px for the .hero

Here is the updated code

    @import url('https://fonts.googleapis.com/css2?family=IBM Plex Serif:wght@200&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-size: 21px;
    line-height: 28px;
  }
  
  a {
    text-decoration: none;
  }
  html{
    line-height: 1.15;
    text-size-adjust: 100%;
  }
  body {
    background: whitesmoke;
    margin: 0;  
    display: block;
    margin: 8px;
  }
  
nav {
  display: block;
}
  .container {
    width: min(80%, 1200px);
    margin: auto;
    min-height: 102vh;
    text-align: center;
    position: relative;
    /*top: -49px;*/
    height: 76%;
  }
  #mainl{
    width: 200px;
    height: 300px;
  }
  
  .hero {
    background: linear-gradient(95.78deg, rgb(69, 70, 110) 28.23%, rgb(21, 22, 74) 52.12%, rgb(61, 21, 66) 100%);
    z-index: 1;
    border: 2px solid #800000;
    display: grid;
    /*height: 50px; */
    width: 50%
  }
  
  .hero-text {
    color: #800000;
    display: inline-block;
    line-height: 1;
    margin: 5em auto;
    z-index: 1;
  }
  .hero-text2 {
    color: #800000;
    position: relative;
    top: 5px;
    z-index: 1;
  }
  span {
    display: inline-block;
    margin-right: auto;
  
    position: relative;
    font-size: clamp(1.5rem, 5vw   10px, 3rem);
    animation: reveal_anim 1s forwards;
  }
  #hero span::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  a {
    text-decoration: none;
  }
  
  .cta {
    display: inline-block;
    margin-right: auto;
    margin-top: 1em;
    padding: 0.2em 0.5em;
    font-size: clamp(1rem, 5vw, 2rem);
    border: 2px solid blue;
    animation: reveal_anim 1s forwards;
    animation-delay: 500ms;
    opacity: 0;
  
  }
/* End Hero Section */
/* Servicesss Section */
#services{
    flex-direction: column;
    text-align: center;
    font-size: 15px;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 100px 0;
    border-top: 5px;
    margin-top: 5px;
    /*this flex overrised the container style*/
}   
#services .section-title{
    font-size: 4rem;
    font-weight: 300;
    /*light weight*/
    color: #6f2a70;
    margin-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}
#services .section-title span{
    color:#800000;
    font-size: 3rem;
}
#services .section-title{
  color: black;
  font-size: 3rem;
}
#services .service-top p {
    font-size: 1.4rem;
    margin-top: 5px;
    line-height: 2.5rem;
    font-weight: 300px;
    letter-spacing: .05rem;
}
#services .service-bottom {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    
}
#services .service-item {
    flex-basis: 80%;
    display: fleq;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    background-image: url(https://www.nasa.gov/sites/default/files/thumbnails/image/archives_m8_0.jpg);
    background-size: cover;
    margin: 10px 5%;
}
#services .service-item::after{
  content:'';
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: .1;
  z-index: -1;
}
.icon img{
  position:relative;
  /*left: 425px;*/
}
#services .service-item p {
    color: #800000;
    font-size: 20px;
}
#services .service-item h2 {
  color: white;
  position: relative;
  font-size: 30px;
  top: -60px;
}
#services .service .container {
    margin: 10px;
}
/* End of Servicesss Section */
/*keyframes*/
@keyframes reveal_anim{
    0% {
        transform: translateX(50%);
    }
    50% {
        opacity:0.5;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.icon img {max-height: 200px;}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <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">
        <title>FullSite</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>

    <body>
<!--Start of Bootstrap code-->
    <nav class="navbar navbar-expand-sm navbar-dark bg-info">
        <a href="#" class="navbar-brand">Astronomics</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <!--Data-toggle is used by bootstrap js to listen to clicks and open/close automatically. the data target has to matchet collapse target-->
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Users</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Products</a>
                </li>
            </ul>
        </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
        crossorigin="anonymous"></script>
    <!--End of Bootstrap code-->

    <!-- Start Hero Section -->
    <main>
    <section id="hero">
        <div class="hero container">
            <div class="hero-text">
               <h1><span>Welcome</span><br/> 
                <span>To J.P.A</span><br/>
                <h1><span>Investments</span></h1>
                <a href="#" type="button" class="cta">DAO Portfolio</a>
        </div>
        <div class="hero-text2">
               <h1><span>Join</span><br/> 
                <span>Our</span><br/>
                <h1><span>Vision</span></h1>
                <a href="#" type="button" class="cta">DAO WhitePapers</a>
        </div> 
        </main>      
    </section>
    <!-- End Hero Section --> 
    <!--SERVICE SECTION-->
    <section id="services">
        <!--<div class="service container"></div>-->
         <div class="service-top">
             <h1 class="section-title"><span>$Astro</span>nomical Future</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="service-bottom">
            <div class="service-item">
                <div class="icon"><img src="https://www.nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="https://www.nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="https://www.nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="https://www.nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </div>
                </div>

    </section>
    
</body>
</html>

NOTE: For some reasons the resources are not loading properly in this snippet. You can see this pen for reference

CodePudding user response：

in your code .container have top: -49 px just comment it and then .hero z-index:1 comment it . your overlapping problem will solve. you have simple design but by coding with html and css your are making complicated. there is simple way to approach it. if you need my help then contact me.

Page link：https//www.codepudding.com/net/122986.html

Prev:How to make an anchor tag save file?
Next:How to hover <td> that contain specific data
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding