<template>
<header>
<nav class="container">
<div class="branding">
<router-link class="header" :to="{name : 'Home'}">>FireBlogs</router-link>
</div>
<div class="nav-links">
<ul>
<router-link class="link" to="#">Home</router-link>
<router-link class="link" to="#">Blogs</router-link>
<router-link class="link" to="#">Create Post</router-link>
<router-link class="link" to="#">Login/Register</router-link>
</ul>
</div>
</nav>
<menuIcon class="menu-icon" />
<transition name="mobile-nav" id="mobile-nav">
<ul>
<router-link class="link" to="#">Home</router-link>
<router-link class="link" to="#">Blogs</router-link>
<router-link class="link" to="#">Create Post</router-link>
<router-link class="link" to="#">Login/Register</router-link>
</ul>
</transition>
</header>
</template>
Within this vueJS code, I am attempting to style the transition tag as a whole using CSS. However, when inspecting the webpage, only partial elements are visible: View Console Image here I am seeking assistance in addressing this styling issue. Can anyone provide guidance?