Here are some key details:
- The tool I'm currently utilizing:
- The current outcome displayed: https://i.sstatic.net/IRZHk.jpg
- The desired outcome to achieve: https://i.sstatic.net/N6Itv.jpg
I have incorporated a dropdown feature into the navigation bar of my website. Prior to adding the following class:
.sidenav-trigger
To the following section :
<li><a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black;"><i class="material-icons">settings</i>Settings</a></li>
This segment is nested inside the subsequent <ul>:
<ul id='dropdown1' class='dropdown-content'>
<li>
<a href="{% url 'FullSearch:Search' %}" style="color: black;"><i class="material-icons">search</i>Search</a>
</li>
<li>
<a href="{% url 'UserProfiles:UserProfile' Username=UserName %}" style="color: black;"><i class="material-icons">person</i>Profile</a>
</li>
<li>
<a href="{% url 'Discover:DiscoverPage' %}" style="color: black;"><i class="material-icons">public</i>Explore</a>
</li>
<li>
<a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black;"><i class="material-icons">settings</i>Settings</a>
</li>
<li>
<a href="{% url 'UserLogout:LogoutPage' %}" style="color: black;"><i class="material-icons">arrow_back</i>Logout</a>
</li>
</ul>The dropdown menu currently displays as intended.
Merely removing this class will not resolve the issue, as it is required for the pullout sidebar functionality.
Do you have any suggestions on how I can adjust the text alignment within the dropdown?