navbar styling issues with Material framework - css

Question

I am not able to keep my all ul/li list with logo and logged user name on the nav bar using materializecss? There are 6 navigations with a logo with a user name that I want to keep on the nav bar but, i am not able to keep all these on the nav bar. logo comes on the navigations text and user name come below of the nav bar. below are the some part of the html code.
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper white black-text">
<img style="height: 56px;width: 70px;" src="<?php echo base_url(); ?>assets/images/Pratham-1.png">
<i class="material-icons menu">menu</i>
<ul class="right hide-on-med-and-down">
<!-- <li> <?php echo $name;?></li>
<li>Logout</li> -->
<li><a class="dropdown-button" href="#!" data-activates="basicinfo"><i class="material-icons left">language</i>Basic Information<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="learningresults"><i class="material-icons left">show_chart</i>Learning Results<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="attendance"><i class="material-icons left">supervisor_account</i>Attendance<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="monitoringinformation"><i class="material-icons left">search</i>Monitoring Information<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#!" data-activates="others"><i class="material-icons left">speaker_notes</i>Others<i class="material-icons right">arrow_drop_down</i></a></li>
<li><i class="material-icons left">vertical_align_bottom</i>Download Data</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1"><?php echo $name;?><i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<!-- Dropdown for Baisc Info large screen-->
<ul id="basicinfo" class="dropdown-content">
<li>Reach 2016-17</li>
<li class="divider"></li>
<li>What is Read? India</li>
<li>Tools & MME Formats</li>
<li>Implementation models</li>
<li>Archives</li>
</ul>
<!-- Dropdown for Learnign Levels large screen-->
<ul id="learningresults" class="dropdown-content">
<li>Camp-wise Results</li>
<li>Jumps Across Reading Levels</li>
<li>Know Your Progress</li>
<li>Comparison Reports</li>
<li>Goal Tracker</li>
</ul>
CSS - i have tried this so far I have tried this so far -
nav {
height: 120px;
line-height: 90px;
font-size: 12px;
}
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
/*height: 30px;
line-height: 30px;*/
}
nav .button-collapse i {
/* height: 30px;
line-height: 30px;*/
}
nav .brand-logo {
font-size: 1.6rem;
}
#media only screen and (min-width: 601px){
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
/* height: 30px;
line-height: 30px;*/
}
}
nav a:hover {
color: blue;
/* text-decoration: underline;*/
}

Answer 1

I think this is more an issue with UI/UX design. I think this would look best on desktop as a side-nav that's fixed.
Here's an example from the Materialize Documentation without the need of changing the CSS:
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
<object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
<li class="search">
<div class="search-wrapper card">
<input id="search"><i class="material-icons">search</i>
<div class="search-results"></div>
</div>
</li>
<li class="bold">About</li>
<li class="bold">Getting Started</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
<div class="collapsible-body">
<ul>
<li>Color</li>
<li>Grid</li>
<li>Helpers</li>
<li>Media</li>
<li>Sass</li>
<li>Shadow</li>
<li>Table</li>
<li>Typography</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
<div class="collapsible-body">
<ul>
<li>Badges</li>
<li>Buttons</li>
<li>Breadcrumbs</li>
<li>Cards</li>
<li>Chips</li>
<li>Collections</li>
<li>Footer</li>
<li>Forms</li>
<li>Icons</li>
<li class="active">Navbar</li>
<li>Pagination</li>
<li>Preloader</li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
<div class="collapsible-body">
<ul>
<li>Carousel</li>
<li>Collapsible</li>
<li>Dialogs</li>
<li>Dropdown</li>
<li>Media</li>
<li>Modals</li>
<li>Parallax</li>
<li>Pushpin</li>
<li>ScrollFire</li>
<li>Scrollspy</li>
<li>SideNav</li>
<li>Tabs</li>
<li>Transitions</li>
<li>Waves</li>
</ul>
</div>
</li>
</ul>