How to add columns to my drop down menu?


#1

As the title says, If I add more links to the column it will look messy and become long hence I want to add another column. Someone please teach me, thanks

Blog: www.theticblog.com


#2

Now, I have the solution :blush:

Firstly, you may find or you might have edited this code to edit the dropdown options of ‘Top 5’:

<li><a href="#" itemprop="url" class="parent"><span itemprop="name">Top 5</span></a>
<ul>
<li><a href="http://www.theticblog.com/search/label/Android%20Top%205" itemprop="url"><span itemprop="name">Android</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Top%205%20food" itemprop="url"><span itemprop="name">Food</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Entertainment%20top%205" itemprop="url"><span itemprop="name">Entertainment</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Top%205%20photography%20apps" itemprop="url"><span itemprop="name">Photography</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Internet%20top%205?" itemprop="url"><span itemprop="name">Internet</span></a></li>
</ul>

Locate it. Now, replace that code with this one:

<li><a href="#" itemprop="url" class="parent"><span itemprop="name">Top 5</span></a>
<ul>
<li><a href="http://www.theticblog.com/search/label/Android%20Top%205" itemprop="url"><span itemprop="name">Android</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Top%205%20food" itemprop="url"><span itemprop="name">Food</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Entertainment%20top%205" itemprop="url"><span itemprop="name">Entertainment</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Top%205%20photography%20apps" itemprop="url"><span itemprop="name">Photography</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Internet%20top%205?" itemprop="url"><span itemprop="name">Internet</span></a></li>
</ul>
<ul class="secondul">
<li><a href="http://www.theticblog.com/search/label/Android%20Top%205" itemprop="url"><span itemprop="name">Android</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Top%205%20food" itemprop="url"><span itemprop="name">Food</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Entertainment%20top%205" itemprop="url"><span itemprop="name">Entertainment</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Top%205%20photography%20apps" itemprop="url"><span itemprop="name">Photography</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Internet%20top%205?" itemprop="url"><span itemprop="name">Internet</span></a></li>
</ul>
</li>

Now, find ]]></b:skin> and above it, place this code:

ul.secondul {
    margin-left: 168px;
    overflow: hidden;
}

Now save the template and tell me if your problem get solved.


#3

Nope, the new column still wasn’t appearing after completing all these steps :frowning:


#4

Do it one time more. I have updated the codes.

See, after doing all the steps again, it will look like this:


#5

I did it again, nothing again :confused: Codes look legit to me, just don’t get why it’s working. Had to revert back to backup template


#6

Okay. So, simple steps:

Find these codes in your template:

<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' mobile='yes' role='navigation'>
<a class='slideMenu' href='#'><i class='fa fa-list'></i> Menu</a>
<ul class='nav main-navigation'>
<li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'></i> Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Top 10</span></a>
<ul>
<li><a href='http://www.theticblog.com/search/label/Android%20top%2010' itemprop='url'><span itemprop='name'>Android</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Entertainment%20top%2010' itemprop='url'><span itemprop='name'>Entertainment</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Top%2010%20social%20networking' itemprop='url'><span itemprop='name'>Social Networking</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Education%20Top%2010' itemprop='url'><span itemprop='name'>Education</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Top 5</span></a>
<ul>
<li><a href='http://www.theticblog.com/search/label/Android%20Top%205' itemprop='url'><span itemprop='name'>Android</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Top%205%20food' itemprop='url'><span itemprop='name'>Food</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Entertainment%20top%205' itemprop='url'><span itemprop='name'>Entertainment</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Top%205%20photography%20apps' itemprop='url'><span itemprop='name'>Photography</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Internet%20top%205?' itemprop='url'><span itemprop='name'>Internet</span></a></li>
</ul>
</li>
<li><a href='http://www.theticblog.com/search/label/tutorial' itemprop='url'><span itemprop='name'>Tutorials</span></a></li>
<li><a href='http://www.theticblog.com/search/label/reviews' itemprop='url'><span itemprop='name'>Reviews</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Earn%20online' itemprop='url'><span itemprop='name'>Earn Online</span></a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/></td>
<td class='search-button'><input id='search-button' type='submit' value='?'/></td></tr></tbody></table></form>
</nav>

Now, replace all above code with this code:

<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' mobile='yes' role='navigation'>
<a class='slideMenu' href='#'><i class='fa fa-list'></i> Menu</a>
<ul class='nav main-navigation'>
<li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'></i> Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Top 10</span></a>
<ul>
<li><a href='http://www.theticblog.com/search/label/Android%20top%2010' itemprop='url'><span itemprop='name'>Android</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Entertainment%20top%2010' itemprop='url'><span itemprop='name'>Entertainment</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Top%2010%20social%20networking' itemprop='url'><span itemprop='name'>Social Networking</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Education%20Top%2010' itemprop='url'><span itemprop='name'>Education</span></a></li>
</ul>
<ul class="secondul">
<li><a href="http://www.theticblog.com/search/label/Android%20Top%205" itemprop="url"><span itemprop="name">Android</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Top%205%20food" itemprop="url"><span itemprop="name">Food</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Entertainment%20top%205" itemprop="url"><span itemprop="name">Entertainment</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Top%205%20photography%20apps" itemprop="url"><span itemprop="name">Photography</span></a></li>
<li><a href="http://www.theticblog.com/search/label/Internet%20top%205?" itemprop="url"><span itemprop="name">Internet</span></a></li>
</ul>
</li>
<li><a href='http://www.theticblog.com/search/label/tutorial' itemprop='url'><span itemprop='name'>Tutorials</span></a></li>
<li><a href='http://www.theticblog.com/search/label/reviews' itemprop='url'><span itemprop='name'>Reviews</span></a></li>
<li><a href='http://www.theticblog.com/search/label/Earn%20online' itemprop='url'><span itemprop='name'>Earn Online</span></a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/></td>
<td class='search-button'><input id='search-button' type='submit' value='?'/></td></tr></tbody></table></form>
</nav>
<style>
ul.secondul {
    margin-left: 168px;
    overflow: hidden;
}
</style>

#7

Thanks for your help bro, but I’ve changed niche of my blog & decide to delete those menus too. :slight_smile: