I've created a navigation bar component using vue.js and am styling it with bootstrap by including the framework in the main HTML file.
Although I've added the desired styling to the navbar component, I'm facing an issue where adding the shadow or shadow-lg class doesn't display any shadows. I even tried increasing the z-index of the navbar, but the shadow remains invisible.
<template>
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-rounded shadow-lg" style="z-index: 100;">
<a class="navbar-brand" href="/">{{ logo_text }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"
v-for="(item, index) in links"
:key="index"
>
<a :href="item.href" class="nav-link">{{ item.text }}</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</template>
Please note that the custom class navbar-rounded was applied for additional styling:
.navbar-rounded {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
Looking for suggestions on how to make the shadow display correctly?