In my previous posts, I have completely guided to everyone to edit the median ui template. Today I will show you how to customize the awesome nav menu bar on the median ui 1.5 template, everyone.
How to Customize the Nav Menu Bar on the Median ui 1.5 Template
Step 1: Find the code <li class='dropDown'> and delete all the first </li> closing tag into the following code:
<li class='dropDown'> <input class='dropMenu hidden' id='offdropMenu1' name='dropDown' type='checkbox' /> <label class='link' for='offdropMenu1'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'></line><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'></path></g></svg> <span class='name'>Categories</span> <svg class='line down' viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'></path></g></svg> </label> <ul> <li itemprop='name'><a href='/search/label/template' itemprop='url'>Template</a></li> <li itemprop='name'><a href='/search/label/blogger' itemprop='url'>Blogger</a></li> <li itemprop='name'><a href='/search/label/facebook' itemprop='url'>Facebook</a></li> </ul> </li> <li class='dropDown break'> <input class='dropMenu hidden' id='offdropMenu2' name='dropDown' type='checkbox' /> <label class='link' for='offdropMenu2'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(2.900000, 4.600000)'><line x1='4.0791' x2='4.0791' y1='0.0013' y2='12.6193'></line><path d='M-2.57571742e-14,4.1 C-2.57571742e-14,4.1 2.169,1.0658141e-14 4.078,1.0658141e-14 C5.986,1.0658141e-14 8.156,4.1 8.156,4.1'></path><line x1='14.0059' x2='14.0059' y1='14.8275' y2='2.2095'></line><path d='M18.085,10.7284 C18.085,10.7284 15.915,14.8284 14.007,14.8284 C12.099,14.8284 9.929,10.7284 9.929,10.7284'></path></g></svg> <span class='name'>Tools</span> <svg class='line down' viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'></path></g></svg> </label> <ul> <li itemprop='name'><a href='https://www.trickpk.com/' itemprop='url' title='Tools A'>Tools A</a></li> <li itemprop='name'><a href='https://www.trickpk.com/' itemprop='url' title='Tools B'>Tools B</a></li> <li itemprop='name'><a href='https://www.trickpk.com/' itemprop='url' title='Tools C'>Tools C</a></li> <li itemprop='name'><a href='https://www.trickpk.com/' itemprop='url' title='Tools D'>Tools D</a></li> <li itemprop='name'><a href='https://www.trickpk.com/' itemprop='url' title='Tools E'>Tools E</a></li> </ul> </li> <li> <a class='link' href='/about' itemprop='url'> <svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.749500, 2.549500)'><path d='M6.809,18.9067 C3.137,18.9067 9.41469125e-14,18.3517 9.41469125e-14,16.1277 C9.41469125e-14,13.9037 3.117,11.8997 6.809,11.8997 C10.481,11.8997 13.617,13.8847 13.617,16.1077 C13.617,18.3307 10.501,18.9067 6.809,18.9067 Z'></path><path d='M6.809,8.728 C9.219,8.728 11.173,6.774 11.173,4.364 C11.173,1.954 9.219,-2.48689958e-14 6.809,-2.48689958e-14 C4.399,-2.48689958e-14 2.44496883,1.954 2.44496883,4.364 C2.436,6.766 4.377,8.72 6.778,8.728 L6.809,8.728 Z'></path><path d='M14.0517,7.5293 C15.4547,7.1543 16.4887007,5.8753 16.4887007,4.3533 C16.4897,2.7653 15.3627,1.4393 13.8647,1.1323'></path><path d='M14.7113,11.104 C16.6993,11.104 18.3973,12.452 18.3973,13.655 C18.3973,14.364 17.8123,15.092 16.9223,15.301'></path></g></svg> <span class='name' itemprop='name'>About</span> </a> </li> <li> <a class='link' href='/contact' itemprop='url'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(2.452080, 2.851980)'><path d='M15.0928322,6.167017 C15.0928322,6.167017 11.8828071,10.0196486 9.53493746,10.0196486 C7.18807029,10.0196486 3.941955,6.167017 3.941955,6.167017'></path><path d='M1.04805054e-13,9.11679198 C1.04805054e-13,2.27869674 2.38095238,8.8817842e-15 9.52380952,8.8817842e-15 C16.6666667,8.8817842e-15 19.047619,2.27869674 19.047619,9.11679198 C19.047619,15.9538847 16.6666667,18.233584 9.52380952,18.233584 C2.38095238,18.233584 1.04805054e-13,15.9538847 1.04805054e-13,9.11679198 Z'></path></g></svg> <span class='name' itemprop='name'>Contact</span> </a> </li> <li class='break'> <a class='link' href='https://www.trickpk.com/' itemprop='url' target='_blank'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='13.9394' x2='13.9484' y1='10.413' y2='10.413'></line><line x1='9.9304' x2='9.9394' y1='10.413' y2='10.413'></line><line x1='5.9214' x2='5.9304' y1='10.413' y2='10.413'></line><path d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'></path></g></svg> <span class='name now' itemprop='name'>Messenger</span> </a> </li> <li> <a class='link' href='/search/label/template-premium' itemprop='url'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(3.650200, 2.850200)'><path d='M2.044,3.58024493 C7.3705141,2.243 13.9926469,2.32498848 15.5231061,4.06777179 C17.0535652,5.8105551 17.0220031,11.638 15.2330031,13.237 C13.4450031,14.836 5.68,14.988 3.22,13.237 C0.621,11.386 2.129,5.692 2.044,2.243 C2.095,0.313 -1.13686838e-13,0 -1.13686838e-13,0'></path><line x1='10.5059' x2='13.2789' y1='7.8696' y2='7.8696'></line><path d='M3.6138,17.2773 C3.9138,17.2773 4.1578,17.5213 4.1578,17.8213 C4.1578,18.1223 3.9138,18.3663 3.6138,18.3663 C3.3128,18.3663 3.0688,18.1223 3.0688,17.8213 C3.0688,17.5213 3.3128,17.2773 3.6138,17.2773 Z'></path><path d='M13.9453,17.2773 C14.2463,17.2773 14.4903,17.5213 14.4903,17.8213 C14.4903,18.1223 14.2463,18.3663 13.9453,18.3663 C13.6453,18.3663 13.4013,18.1223 13.4013,17.8213 C13.4013,17.5213 13.6453,17.2773 13.9453,17.2773 Z'></path></g></svg> <span class='name premium' itemprop='name'>Template</span> </a> </li> <li> <a class='link' href='/search/label/template-free' itemprop='url'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='9.8791' x2='9.8791' y1='12.791' y2='0.75'></line><polyline points='12.7951 9.8642 9.8791 12.7922 6.9631 9.8642'></polyline><path d='M14.3703,5.2587 C17.9493,5.5887 19.2503,6.9287 19.2503,12.2587 C19.2503,19.3587 16.9393,19.3587 10.0003,19.3587 C3.0593,19.3587 0.7503,19.3587 0.7503,12.2587 C0.7503,6.9287 2.0503,5.5887 5.6303,5.2587'></path></g></svg> <span class='name free' itemprop='name'>Template</span> </a> </li> <li class='break'> <a class='link' href='/search/label/blogger' itemprop='url'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'></line><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'></path></g></svg> <span class='name' itemprop='name'>Blogger</span> </a> </li> <li> <a class='link' href='/sitemap' itemprop='url'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(3.610000, 2.750100)'><line x1='11.9858' x2='4.7658' y1='12.9463' y2='12.9463'></line><line x1='11.9858' x2='4.7658' y1='9.1865' y2='9.1865'></line><line x1='7.521' x2='4.766' y1='5.4272' y2='5.4272'></line><path d='M7.63833441e-14,9.25 C7.63833441e-14,16.187 2.098,18.5 8.391,18.5 C14.685,18.5 16.782,16.187 16.782,9.25 C16.782,2.313 14.685,0 8.391,0 C2.098,0 7.63833441e-14,2.313 7.63833441e-14,9.25 Z'></path></g></svg> <span class='name' itemprop='name'>Sitemap</span> </a> </li> <li> <a class='link dmca-badge' href='//www.dmca.com/Protection/Status.aspx?ID=xxxxxxxxxxxxxxxxx' itemprop='url' target='_blank' title='DMCA.com Protection Status'> <script src='https://images.dmca.com/Badges/DMCABadgeHelper.min.js'></script> <svg class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z'></path><polyline points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'></polyline></g></svg> <span class='name' itemprop='name'>DMCA</span> </a> </li> <li class='break'> <a class='link' href='/privacy' itemprop='url'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M12.9709,7.4033 L12.9709,5.2543 C12.9399,2.7353 10.8719,0.7193 8.3539,0.7503 C5.8869,0.7813 3.8919,2.7673 3.8499,5.2343 L3.8499,7.4033'></path><line x1='8.4103' x2='8.4103' y1='12.1562' y2='14.3772'></line><path d='M8.4103,6.8242 C2.6653,6.8242 0.7503,8.3922 0.7503,13.0952 C0.7503,17.7992 2.6653,19.3672 8.4103,19.3672 C14.1553,19.3672 16.0713,17.7992 16.0713,13.0952 C16.0713,8.3922 14.1553,6.8242 8.4103,6.8242 Z'></path></g></svg> <span class='name' itemprop='name'>Privacy</span> </a> </li> </ul>
Step 2: Finally, Save it.
If you want to share it on your blog, please remember to credit the source.
Source:
www.tickpk.com