Problem
The issue I am facing is that the content of my h1 element is overlapping with my navbar.
Possible Solutions Tried
I have attempted to adjust the z-index of the nav element and added margins to both the container containing the h1 and the nav element, but neither solution resolved the issue.
Contextual Information
In my NUXT setup, I have a default.vue file in my layouts folder structured 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>
Within the pages section, I have an index.vue file where the problematic h1 element is located:
<template>
<div class="container">
<h1>This text overlaps the navigation bar</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>
Lastly, in the components folder, there's a Navbar.vue component defined as follows:
<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">Explore</NuxtLink>
</li>
<li>
<NuxtLink to="/about">About Us</NuxtLink>
</li>
<li>
<NuxtLink to="/field">Add Restaurant</NuxtLink>
</li>
<li>
<NuxtLink to="/damage">Contact</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>
Despite these configuration settings, the h1 text remains positioned on top of the navbar instead of below it as intended.