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

gap: 20px;

ἔρως•6mo ago

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

Jochem•6mo ago

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

ἔρως•6mo ago

that's about 1.2rem?

Jochem•6mo ago

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

ἔρως•6mo ago

close!

Jochem•6mo ago

very close 😄

CDLOP•6mo ago

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

Jochem•6mo ago

gap goes on the flex parent

ἔρως•6mo ago

you have to target the parent

CDLOP•6mo ago

yeah so I had gap: 20px on the wrapper

Jochem•6mo ago

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

ἔρως•6mo ago

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

Jochem•6mo ago

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

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

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

ἔρως•6mo ago

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

CDLOP•6mo ago

that done did diddly did it

CDLOP•6mo ago

thank you gentlemen

ἔρως•6mo ago

you can remove the .wrapper element

CDLOP•6mo ago

yeah it's gone

ἔρως•6mo ago

the div is gone?

CDLOP•6mo ago

I removed the div

Jochem•6mo ago

https://tenor.com/bsjsK.gif

Tenor

ἔρως•6mo ago

good 🤣

Jochem•6mo ago

glad it's fixed, CDL!

CDLOP•6mo 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!

ἔρως•6mo ago

you're welcome

Gaming

Programming

VueJS Navbar