CODEWITHSUNDEEP
htmlcssvue.jsnuxt.js
atk9022
atk9022

Reputation: 97

Why is the content of my h1 going on top of a fixed navbar component?

Issue

The content of my h1 is going on top of my navbar.

Attempts at a solution

I saw other threads where they changed the z-index of the nav element to 1, but that didn't work. I also tried adding margins to both the container that has the h1 and the nav element to push them away from eachother, but that had no effect.

Information

I am using NUXT where I have a default.vue in my layouts folder that looks like this:

<template>
  <div class="container">
    <Navbar/>
    <Nuxt/>
    <img src="revue/assets/nuxtjs-typo.svg" alt="nuxt-typo">
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue';
export default {
  components: {
    Navbar
  }
}
</script>

And in the pages section I have an index.vue that contains the h1:

<template>
  <div class="container">
    <h1>This text is on top of the nav</h1>
  </div>
</template>

<script>
export default {}
</script>

<style>

html, body {
    margin: 0;
    padding: 0;
}

h1 {
    color: #2F495E;
    font-family: 'Quicksand', sans-serif;
    font-size: 1em;
    text-align: center;
}

</style>

And finally the Navbar.vue component in the components folder:

<template>
    <nav>
        <ul>
            <li>
                <img id="nuxticon" src="../assets/nuxt-icon.png" alt="nuxticon">
            </li>
            <li>
                <img id="nuxttext" src="../assets/nuxtjs-typo.svg" alt="nuxttext">
            </li>
            <li>
                <NuxtLink to="/docs">Udforsk</NuxtLink>
            </li>
            <li>
                <NuxtLink to="/about">Om os</NuxtLink>
            </li>
            <li>
                <NuxtLink to="/field">Tilføj restaurant</NuxtLink>
            </li>
            <li>
                <NuxtLink to="/damage">Kontakt</NuxtLink>
            </li>
        </ul>
    </nav>
</template>

<style>


nav {
    position: fixed;
    box-shadow: 0 1px 3px -3px gray;
    width: 100vw;
    height: 8vh;
    top: 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}


nav ul li {
    display: flex;
    align-items: center;
}


a {
    font-size: 1.5vh;
    margin-left: 2vw;
    text-decoration: none;
    color: #2F495E;
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
}

#nuxttext {
    height: 3vh;
    width: 10vw;
    margin-right: 8vw;
}

#nuxticon {
    height: 5vh;
    margin-right: 0.5vw;
}

a:hover {
    color: #08C792;
}


</style>

This results in the h1 text sitting on top of the nav, instead of below it, as intended.

Upvotes: 1

Views: 735

Answers (1)

kissu
kissu

Reputation: 46677

Your position: fixed on nav is making that it's out of the flow, so the h1 cannot know that he needs to be offset. Either remove the fixed or apply a margin-top of 8vh (to match nav's height).

Here is a hosted solution with Vanilla CSS: https://play.tailwindcss.com/eN9umaRtr5

Upvotes: 2

Related Questions