I am encountering an issue because I haven't studied much about the design aspect.
I am currently using a template from w3layouts.com under the Education section, specifically the Tutoring Template. This template is based on Bootstrap.
The demo page that I have edited can be found here: Demo Page
I am utilizing the dropdown button feature of Bootstrap.
When I check the dropdown button for Downloads on my laptop, it appears like this: https://i.sstatic.net/bMc5K.jpg
However, when I view the same page on my mobile device (adjusting the web browser size), it looks like this: https://i.sstatic.net/1Acba.jpg
As seen in the image above with the Desktop View, it appears cluttered...
What should I do now? The code is provided below.
<div class="header" id="home">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html" class="hvr-bounce-to-top">Home <span class="sr-only">(current)</span></a></li>
<!-- Issue Arises Here -->
<!-- Issue Arises Here -->
<!-- Issue Arises Here -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Downloads <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Practical Files</li>
<li><a href="#">Selected Download</a></li>
<li><a href="#">List View Mode</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Cover/Index Pages</li>
<li><a href="#">Front/Cover Pages</a></li>
<li><a href="#">Index Pages</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Reports Format</li>
<li><a href="#">Major/Minor Format</a></li>
<li><a href="#">Industrial File Format</a></li>
<li class="dropdown-header">Reports Files</li>
<li><a href="#">Major/Minor Projects</a></li>
<li><a href="#">Industrial Training</a></li>
</ul>
</li>
<!-- Up to this Point -->
<!-- Up to this Point -->
<!-- Up to this Point Maybe -->
<li><a href="about.html" class="hvr-bounce-to-top">About</a></li>
<li><a href="services.html" class="hvr-bounce-to-top">Services</a></li>
<li><a href="contact.html" class="hvr-bounce-to-top">Contact</a></li>
</ul>
<div class="clearfix"></div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
If you require any other codes or the full code, please inform me. I have attempted to add and remove codes in the HTML but it only makes it messier...