First of all, thank you for making this great website template.
We have made our website based on your template (http://peacelaw.org/) but a serious bus has occured and we need an urgent solution for this.
The sub-menu of header particles get out of the original header part and locates itself below the header part if the monitor definition decreases, at about 767px. (I attached the screen-capture, and the html part)
I talked with an expert a little bit and he said it happens because we are using bootstrap based header menu.
Anyway, how can we fix this issue? We have tried resizing font-size, div width at different screen resolution but they don't work.
Please, give us some ways to solve this problem.
Thank you
<div id="menu_font">
<nav id="primary-menu">
<ul>
<li><a href="/">Home</a></li>
<li class="sub-menu"><a href="/site/declaration"> Declaration </a>
<ul>
<li><a href="/site/declaration"><div> Full Declaration </div></a></li>
<li><a href="/site/purpose"><div> Purpose and Distinctive Features </div></a></li>
<li><a href="/site/history"><div> History </div></a></li>
</ul>
</li>
<li><a href="/site/legislate_peace_campaign"> Support </a>
<ul>
<li><a href="/site/legislate_peace_campaign"><div> Legislate Peace Campaign </div></a></li>
<li><a href="/site/resource"><div> Resource </div></a></li>
</ul>
</li>
<li><a href="/site/latest_hwpl_news"> Media </a>
<ul>
<li><a href="/site/latest_hwpl_news"><div> Latest News </div></a></li>
<li><a href="/site/gallery"><div> Gallery </div></a></li>
</ul>
</li>
<li><a href="/site/about_us">About Us</a></li>
<li><a href="/site/contact">Contact us</a></li>
<li><a href="/site/pledge"><div class="sign_box">Sign Your Support</div></a></li>
</ul>
</nav>
</div>