VueJS Navbar

I know space-between would work, but I only want the links spaced sliiiighltly apart, like 20px or so..?

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <h1>Gym Tracker</h1>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/nutrition">Nutrition</RouterLink>
        <RouterLink to="/workouts">Workouts</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}

h1 {
  text-align: center;
  font-size: 5rem;
}
</style>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <h1>Gym Tracker</h1>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/nutrition">Nutrition</RouterLink>
        <RouterLink to="/workouts">Workouts</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}

h1 {
  text-align: center;
  font-size: 5rem;
}
</style>

28 Replies

Jochem•4d ago

gap: 20px;

ἔρως•4d ago

^ or, you can use gap-column: 20px or something like that

Jochem•4d ago

though that's one of those where I'd probably use rem, cause it's visually linked directly to text-only components

ἔρως•4d ago

that's about 1.2rem?

Jochem•4d ago

so gap: 1.25rem; 16px is 1, so 4 is .25

ἔρως•4d ago

close!

Jochem•4d ago

very close 😄

CDL•4d ago

I did gap but it didn't affect them, unless I'm targetting the wrong element

Jochem•4d ago

gap goes on the flex parent

ἔρως•4d ago

you have to target the parent

CDL•4d ago

yeah so I had gap: 20px on the wrapper

Jochem•4d ago

oh, hm, wait, the parent is nav isn't it then I can't tell you without seeing the rendered HTML

ἔρως•4d ago

yes, the parent is the nav he has it all wrong

Jochem•4d ago

though I guess display: flex; gap:1.25rem; on nav should work

ἔρως•4d ago

the .wrap shouldn't have the styles it should be the nav the nav is the one that has the children that's the one that needs the flex and that's where the gap goes as well

CDL•4d ago

Do I even need to flex the nav btw? should I not just text-align: center;?

ἔρως•4d ago

you only flex the nav remove .wrapper, put nav it should work

CDL•4d ago

that done did diddly did it