Plans & Prices My Applications Cloud Resources Profile Support Login Sign Up

Make responsive menu fill screen on all devices    
This topic is assigned to Victor

Jun 03, 2015 04:57 PM
I don't like the way the responsive menu looks on larger devices.  To me it looks unfinished - so small floating at the top middle of the screen, with lots of space around it.  
Is there a way I can adjust the code so that the menu fits the width of the device, and the hight of the menu items will adjust relative to the width?

I am not a coder, so have tried a couple of things but nothing has worked.  This is what I tried, but it didn't achieve what I had hoped for (I adjusted the width of each of the menu items to 33% - I didn't do anything to the hight as I thought I would see whether the width worked or not first - it did not):  


<div class="responsivemenulistcontainer">

<ul id="mainMenuList" class="responsiveMenuList" data-menu-v="1">
<li id="li1" class="responsiveMenuItem" data-layout="menuitem">
<a class="responsiveMenuTitle" href="features.html" data-layout-editable="link">
<img class="responsiveMenuImage" border="0" width="33%" height="32" src="features.png" data-layout-editable="image">
<span data-layout-editable="text">Features</span></a>
</li>
<li id="li2" class="responsiveMenuItem" data-layout="menuitem">
<a class="responsiveMenuTitle" href="blog.html" data-layout-editable="link">
<img class="responsiveMenuImage" border="0" width="33%" height="32" src="blog.png" data-layout-editable="image">
<span data-layout-editable="text">Blog</span></a>
</li>
<li id="li3" class="responsiveMenuItem" data-layout="menuitem">
<a class="responsiveMenuTitle" href="advancedvideos.html" data-layout-editable="link"><img data-layout-editable="image" border="0" class="responsiveMenuImage" width="32" height="33%" src="videos.png"><span data-layout-editable="text">Videos</span></a>
</li>
<li id="li4" class="responsiveMenuItem" data-layout="menuitem">
<a class="responsiveMenuTitle" href="goaltracker1.html" data-layout-editable="link">
<img class="responsiveMenuImage" border="0" width="33%" height="32" src="buy.png" data-layout-editable="image">
<span data-layout-editable="text">Goal Tracker</span></a>
</li>
<li id="li5" class="responsiveMenuItem" data-layout="menuitem">
<a class="responsiveMenuTitle" href="camera1.html" data-layout-editable="link">
<img class="responsiveMenuImage" border="0" width="33%" height="32" src="gallery.png" data-layout-editable="image">
<span data-layout-editable="text">Photo &amp; Share</span></a>
</li>
<li id="li6" class="responsiveMenuItem" data-layout="menuitem">
<a class="responsiveMenuTitle" href="contact.html" data-layout-editable="link">
<img class="responsiveMenuImage" border="0" width="33%" height="32" src="contact.png" data-layout-editable="image">
<span data-layout-editable="text">Contact</span></a>
</li>
</ul>

</div>



Jun 04, 2015 06:00 AM
contact me and i can help you  : smartsetapp@gmail.com

    1   
You must login to post messages. Click here to log in.