0
260
ViewsHow do I put the bordered text underneath the nav-menu text?
I did a round bordered text right next to the nav-menu. I having issues on how will I put the text underneath the texts. Refer to the image below.
I wanted to put the coming soon texts underneath the COMPANY and CONTACT menu (I don't mean doing a sub-menu) Below are the code I did for doing this.
<el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
<div class = csoon1>
<span class = text>COMING SOON</span>
</div>
<el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
<div class = csoon2>
<span class = text>COMING SOON</span>
</div>
.text {
border: 2px solid #00db99;
border-radius: 10px;
background-color: #00db99;
font-size: 13px;
}
Is it possible to put the round bordered text underneath? If not I'll try make it stick next to the menu text and get them compressed.
·
Juan Pablo Isaza
1 answers
Answer question0
This is something that I think flexbox is really good for.
The code can look something like this - you'd need to adjust for vue.js of course.
<div class="flex-column">
<el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
<div class = csoon1>
<span class = text>COMING SOON</span>
</div>
</div>
<div class="flex-column">
<el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
<div class = csoon2>
<span class = text>COMING SOON</span>
</div>
</div>
So as you can see, I just wrapped each of the two elements with a div and gave it a class of flex-column. Then in CSS you just add.
.flex-column {
display: flex;
flex-direction: column;
}
·
Juan Pablo Isaza
Report
Answer question