skip to Main Content

I’m currently working on my resume website. I want to add some design to it but i came with a problem. My svg design-item overlap navbar when scrolling down. If i set position to static it doesn’t overlap but then I can’t position it as I want.

enter image description here

HTML:

<section class="page1" id="home">
    <div class="design-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="292.971" height="412.356" viewBox="0 0 292.971 412.356">
            <line id="Line_6" data-name="Line 6" x1="206" y2="363" transform="translate(43.486 24.678)" fill="none" stroke="#2b2b28" stroke-width="100"/>
        </svg>          
    </div>
    <div class="about-wrapper">
        <div class="about-text">
            <p class="fs-45">Hi, I'm John</p>
            <p class="fs-35">
                I'm 19 years-old, computer science student. Mainly coding in python.
                I'm a quick lerner and flexible person. I am currently intrested in Web Development,
                Artificial Intelligence and Design 
            </p>
        </div>
</section>

CSS:

/* NAV BAR */
.my-navbar {
    position: fixed;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 96%;
    padding-left: 2%;
    padding-right: 4%;
}

/* PAGE 1 */

.design-item {
    position: absolute;
    right: 250px;
    bottom: -55px;
}

2

Answers


  1. Chosen as BEST ANSWER

    as someone in comment mention. Add z-index with positive number to a navbar.

    .my-navbar {
    .
    .
    .
    z-index: 1;
    

    }


  2. here is the idea of the linear-gradient and aside a grid-template instead absolute position , also a mediaquerie to reassign cells to the content on lower screen res:

    possible example:

    header {
      background: linear-gradient( 280deg, #ffe100 247px, #000 250px 360px, #ffe100 363px);
    }
    
    header,
    nav {
      display: grid;
      grid-template-columns: minmax(10em, 20%) 1fr 9em 9em;
    }
    
    nav {
      grid-row: 1;
      grid-column: 1 / span 4;
    }
    
    nav a {
      color: white;
      font-size: 2em;
      margin: 0 0.75em;
    }
    
    nav a:nth-child(2) {
      grid-column: 3;
    }
    
    .about-wrapper {
      grid-row: 1;
      grid-column: 2;
      width: 450px;
      max-width: 30vw;
    }
    
    cite {
      display: none;
    }
    
    @media (max-width: 768px) {
      header,
      nav {
        grid-template-columns: auto auto 9em 9em;
      }
      .about-wrapper {
        width: 100%;
        max-width: 90vw;
        margin: auto;
        filter: invert(75%);
        grid-row: 3;
        grid-column: 1 / span 4;
      }
      cite {
        color: #0077cc;
        filter:hue-rotate(180deg);
        display: inline-block;
        font-weight:bold;
      }
    }
    <header class="page1" id="home">
      <nav>
        <a href="#">Home</a>
        <a href="#">Projects</a>
        <a href="#">Contact</a>
      </nav>
      <div class="about-wrapper">
        <div class="about-text">
          <p class="fs-45">Hi, I'm John <cite> and you want to see that page in full page mode too</cite>.</p>
          <p class="fs-35">
            I'm 19 years-old, computer science student. Mainly coding in python. I'm a quick lerner and flexible person. I am currently intrested in Web Development, Artificial Intelligence and Design
          </p>
        </div>
      </div>
    </header>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search