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•5mo ago

gap: 20px;

ἔρως•5mo ago

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

Jochem•5mo ago

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

ἔρως•5mo ago

that's about 1.2rem?

Jochem•5mo ago

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

ἔρως•5mo ago

close!

Jochem•5mo ago

very close 😄

CDLOP•5mo ago

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

Jochem•5mo ago

gap goes on the flex parent

ἔρως•5mo ago

you have to target the parent

CDLOP•5mo ago

yeah so I had gap: 20px on the wrapper

Jochem•5mo ago

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

ἔρως•5mo ago

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

Jochem•5mo ago

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

ἔρως•5mo 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

CDLOP•5mo ago

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

ἔρως•5mo ago

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

CDLOP•5mo ago

that done did diddly did it

CDLOP•5mo ago

thank you gentlemen

ἔρως•5mo ago

you can remove the .wrapper element

CDLOP•5mo ago

yeah it's gone

ἔρως•5mo ago

the div is gone?

CDLOP•5mo ago

I removed the div

Jochem•5mo ago

https://tenor.com/bsjsK.gif

Tenor

ἔρως•5mo ago

good 🤣

Jochem•5mo ago

glad it's fixed, CDL!

CDLOP•5mo ago

it was there for the demo, I just didnt remove it until just now, didnt make any sense to have it in there but yeah, all good, thanks!

ἔρως•5mo ago

you're welcome

Gaming

Programming

VueJS Navbar