I'm currently working on implementing a navigation bar on my master page. Here is the code snippet for the navigation bar:
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:90%; height:14% ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/Logo_Circle.png" alt="RCA" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">My City Name</span><br />My Company Name</span>
</span>
</div>
</nav>
I am now looking to add rounded buttons right below the navigation bar, without any space in between. This is how the navigation bar looks like currently:
https://i.sstatic.net/GtrQJ.png
The goal is to have the rounded buttons displayed horizontally beneath the navbar. Below is the attempted code:
https://i.sstatic.net/wBxfB.png
Here is the code snippet for the buttons:
<div data-role="navbar">
<ul>
<li> <a href="#" class="ui-btn-active nav-border" id=viewtherecent> Recent </a> </li>
<li> <a href="#" class="nav-border" id=viewthefrequency> Frequent </a> </li>
</ul>
</div>
Despite my efforts, the buttons are displaying vertically instead of horizontally underneath the navbar.
Any assistance with this issue would be highly appreciated.