Top category menu configuration (submenu going out of the pass and cant scroll)

This is my first post and I am developing my own NOP website as I cant afford paying thousands of dollars and also I am from a NON IT background, I am an Engineer and my IT knwledge is limted.

Some important bits of information before I post my 1st ever question:
- nopCommerce version 3.9.0
- Installed nopCommerce on a remote host - SmarterASP.net

My question:
my website is www.instrumart.com.au: On the top header menu I have subheaders, I have quite a lot subheaders and they go out of the page when I scroll the mouse on them. As these subheaders are vertically alligned they go out of the page, is there a way to have these subheaders in horizontal orientation so that they all fit in the page and we dont have to scroll down.

I hope my question is clear. Please visit the website and go on Lab consumables and then go in Instrument model and you will see my problem.

Is that your prefer?

Is tht the scroll bar, I don't see it.

Tht will work if there is no way to spread out the sub menu list horizontally.

It will be displayed like following?

Yes tht exactly what I wanted. How to do it?

Add following CSS class to the UL html tag that have too much children

.sublist--double-columns {
    min-width: 500px;
}
.sublist--double-columns > li {
    display: inline-block;
    width: 50%;
}

Hi, thanks for your response. Can you please advice which file do I have to edit to make these changes. Is  it the 480.css or 480.rtl.css or 768.css or 980.css?

You could have a try with 980.css

Hi,
I tried editing the code of 980.css but nothing worked. Maybe I am not inserting the code at the right place in 980.css file. Below is the  partial copy paste of the entire code, can you please advise where to edit the code to get the result.



@media all and (min-width: 1001px) {

/* GLOBAL + HOME PAGE */

.form-fields {
  margin: 0;
}
.inputs {
  text-align: left;
}
.inputs label {
  display: inline-block;
  width: 166px;
  margin: 0 10px 0 0;
  text-align: right;
}
.center-1 .inputs label{
    width:304px;
}
.master-wrapper-content {
  width: auto;
}
.master-column-wrapper {
  width: 980px;
  margin: auto;
}
.home .master-column-wrapper {
  width: auto;
}
.page, .home .page {
  text-align: left;
}
.page-title {
  overflow: hidden;
}
.page-title h1 {
  float: left;
}
.link-rss {
  display: block;
  float: right;
  margin: 3px 0 0;
}

.home .topic-block {
  width: 980px;
  text-align: justify;
}
.home-page-polls {
  width: 1000px;
}

/* HEADER */

.header {
  display: block;
  position: relative;
  z-index: 1002;
  width: 980px;
  margin: 0 auto;
  padding: 12px 0;
  text-align: left;
}
.header:after {
  content: "";
  display: block;
  clear: both;
}

.header-links-wrapper {
  margin: 0;
}
.header-links-wrapper:after {
  content: "";
  display: block;
  clear: both;
}
.header-links {
  float: left;
  padding: 0;
}
.header-links li {
  margin: 0 15px 0 0;
}
.header-links a:hover {
  color: #c03;
}

.flyout-cart {
  display: none;
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 99999;
  width: 300px;
  border-width: 5px 1px 1px;
  border-style: solid;
  border-color: #333 #ccc #ccc;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  background: #fff;
}
#topcartlink:hover .flyout-cart {
  display: block;
}
.mini-shopping-cart {
  padding: 10px;
  font-size: 11px;
}
.mini-shopping-cart * {
  line-height: normal !important;
}
.mini-shopping-cart a {
  padding: 0;
}
.mini-shopping-cart a:hover {
  text-decoration: underline;
}
.mini-shopping-cart .count {
  border-bottom: 1px dotted #c03;
  padding: 10px 0;
}
.mini-shopping-cart .count a {
  padding: 0;
  font-weight: bold;
  color: #c03;
}
.mini-shopping-cart div.items {
  margin: 0 0 10px;
}
.mini-shopping-cart .item {
  border-bottom: 1px dotted #999;
  overflow: hidden;
  padding: 10px 0;
}
.mini-shopping-cart .picture {
  float: left;
  width: 50px;
  text-align: center;
}
.mini-shopping-cart .picture a {
  display: block;
  position: relative;
  overflow: hidden;
}
.mini-shopping-cart .picture a:before {
  content: " ";
  display: block;
  padding-top: 100%;
}
.mini-shopping-cart .picture img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
}
.mini-shopping-cart .picture + .product {
  margin: 0 0 0 60px;
}
.mini-shopping-cart .name {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: bold;
}
.mini-shopping-cart .name a {
  color: #333;
}
.mini-shopping-cart .totals {
  margin: 0 0 10px;
  font-size: 12px;
  text-align: right;
}
.mini-shopping-cart .totals strong {
  color: #c03;
}
.mini-shopping-cart .buttons {
  margin: 0 0 5px;
  text-align: right;
}
.mini-shopping-cart input[type="button"] {
  display: inline-block;
  border: none;
  background-color: #c03;
  padding: 8px 16px;
  color: #fff;
}
.mini-shopping-cart input[type="button"]:hover {
  opacity: 0.8;
}

.search-box.store-search-box {
  float: right;
  clear: right;
}
.search-box form {
  border: none;
}
.search-box.store-search-box input.search-box-text {
  width: 250px !important;
  height: 32px;
  font-style: normal;
}
.search-box.store-search-box .search-box-button {
  height: 32px;
}
.ui-autocomplete.ui-menu.ui-widget.ui-widget-content {
  width: 286px !important;
}
.header-selectors-wrapper {
  float: right;
  background: none;
  padding: 0;
}
.header-selectors-wrapper > div {
  float: left;
  margin: 0 10px 0 0;
}
.header-selectors-wrapper > div:last-child {
  margin-right: 0;
}
.header-selectors-wrapper select {
  min-width: 100px;
  max-width: 120px;
  border: none;
  background-color: #eee;
  font-size: 12px;
  color: #666;
}

/* SUBHEADER - LOGO & HEADER MENU */

.responsive-nav-wrapper-parent,
.justAFixingDivBefore,
.overlayOffCanvas,
.menu-title, .close-menu,
.header-menu .back-button,
.plus-button {
  display: none !important;
}

.subheader-wrapper {
  margin: 0 0 30px;
  background-color: #333;
  text-align: center;
  font-size: 0;
}

.logo-wrapper {
  display: inline-block;
  width: 230px;
  margin: 0 10px 0 0;
  background: none;
  padding: 10px 0;
  vertical-align: left;
}
.header-logo {
  padding: 0;
  text-align: left;
}
.header-logo img {
  max-width: 230px;
}

.headerMenuParent {
  display: inline-block;
  width:1001px;
  margin: 0;
  padding: 10px 0;
  vertical-align: top;
}

.header-menu {
  position:relative;
  z-index:1001;

}
.header-menu > ul {
  display: block;
  text-align: left;
  font-size: 0;
  color: #fff;
}
.header-menu > ul > li {
  display: inline-block;
  padding: 5px 18px;
  vertical-align: middle;
}
.header-menu > ul > li > a,
.header-menu > ul > li > span {
  font: normal 14px 'eurostile';
  cursor: pointer;
}
.header-menu > ul > li > a:first-letter,
.header-menu > ul > li > span:first-letter {
  font-size: 18px;
}
.header-menu > ul > li > a:hover {
  text-shadow: 0 0 5px #fff;
}

.header-menu .sublist-wrap {
  display: none;
  position: absolute;
  z-index: 1001;
  min-width: 180px;
  margin: 5px 0 0;
  border-width: 4px 0;
  border-style: solid;
  border-color: #333;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  background-color: #fff;
}

.header-menu .sublist-wrap.active {
    display: block !important;
}
.header-menu .sublist li {
  position: relative;
  border-bottom: 1px dotted #ccc;
}
.header-menu .sublist li:last-child {
  border-bottom: none;
}
.header-menu .sublist .back-button {
  display: none;
}
.header-menu .sublist li a {
  display: block;
  padding: 10px;
  font: normal 12px 'eurostile';
  color: #333;
}
.header-menu .sublist li > a:hover {
  background-color: #c03;
  color: #fff;
}
.header-menu .sublist-wrap .sublist-wrap {
  top: -5px;
  left: 100%;
  border-top-width: 0;
}

/* QUICK TABS */

.home-page .ui-tabs {
  width: 980px;
}
.home-page .ui-tabs .ui-tabs-nav li {
  display: inline-block;
}

/*FOOTER*/

.footer > div {
  width: 100%;
}
.footer-upper {
  position: relative;
}
.footer-upper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 60px;
  background-color: #333;
}
.footer-upper .center {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.footer-block {
  width: 23%;
  margin-bottom: 0;
}
.footer-block:nth-of-type(3n+1) {
  clear: none;
}
.footer-block .title {
  margin-bottom: 25px;
  text-align: left;
  cursor: default;
}
.footer-block ul {
  border-right: 1px solid #ccc;
  margin-bottom: 0;
  padding: 0;
}
.footer-block li {
  overflow: hidden;
  font-size: 13px;
}
.footer-block li a {
  padding-right: 10px;
}
.footer-block li:hover a {
    color: #c03;
}
.footer-block li:hover a:before {
    background-color: #c03;
    border-color: #c03;
}
.footer-block.recently-viewed a:hover {
  
}
.footer-block .news-items {
  margin: 0;
  padding: 0;
}
.news-list-homepage .news-title {
  margin-bottom: 3px;
  padding: 0;
  color: #111;
}
.news-list-homepage .news-title:hover {
  color: #c03;
}
.news-list-homepage .view-all {
  display: none;
}

.footer-middle {
  margin: 0;
  background-color: #ccc;
  padding: 15px 0;
}
.footer-middle .center {
  position: relative;
  width: 1000px;
  min-height: 60px;
  margin: auto;
}
.social-sharing {
  position: absolute;
  top: 50%;
  left: 0;
  margin: -16px 0 0;
}
.social-sharing li {
  border: none;
  margin: 0 10px 0 0;
}
.social-sharing .twitter:hover {
  background-position: 0 bottom;
}
.social-sharing .facebook:hover {
  background-position: -32px bottom;
}
.social-sharing .youtube:hover {
  background-position: -64px bottom;
}
.social-sharing .pinterest:hover {
  background-position: -128px bottom;
}
.social-sharing .google:hover {
  background-position: -96px bottom;
}
.social-sharing .rss:hover {
  background-position: -192px bottom;
}
.social-sharing .vimeo:hover {
  background-position: -160px bottom;
}
.social-sharing .instagram:hover {
    background-color: #f2f2f2;
}
.newsletter {
  width: 286px;
  margin: 0 auto;
  border: none;
  background: none;
  padding: 0;
}
.newsletter-email {
  border: none;
  background: #fff;
}
.newsletter-email input[type="text"] {
  width: 250px;
}
    .newsletter .options {
        background: #cccccc none repeat scroll 0 0;
        clear: both;
    }
.accepted-payment-methods {
  position: absolute;
  top: 50%;
  right: 0;
  margin: -18px 0 0;
}
.accepted-payment-methods li {
  border: none;
  margin: 0 0 0 10px;
}

.footer-lower .center {
  position: relative;
  width: 1000px;
  min-height: 24px;
  margin: auto;
  overflow: hidden;
  text-align: left;
}
.footer-lower .center > div {
  margin: 0;
  line-height: 24px;
}
.footer-disclaimer {
  float: left;
}
.footer-powered-by {
  float: right;
}
.footer-designed-by {
    float: right;
    margin: 0 10px 0 0 !important;
}
.footer-store-theme {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -75px !important;
}
.footer-store-theme select {
  width: 150px;
  height: 24px;
  padding: 3px;
}

You can try:

~~~
* In the TopMenu.cshtml view, add following lines of code
~~~

### BEFORE

var subCategories = category.SubCategories.Where(x => x.IncludeInTopMenu).ToList();

if (subCategories.Count > 0)
{
    <a class="with-subcategories" href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name</a>
    <div class="plus-button"></div>
    <div class="sublist-wrap">
        <ul class="sublist">
            <li class="back-button">
               <span>@T("SevenSpikes.Themes.Common.BackSublist")</span>
            </li>
            @foreach (var subCategory in subCategories)
            {
                @RenderCategoryLine(subCategory)
            }
        </ul>
    </div>
}

### AFTER

var subCategories = category.SubCategories.Where(x => x.IncludeInTopMenu).ToList();
var showHorizontalSubMenu = subCategories.Count >= 15;
var subMenuCssClasses = showHorizontalSubMenu ? "sublist sublist--triple-columns" : "sublist";

if (subCategories.Count > 0)
{
    <a class="with-subcategories" href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name</a>
    <div class="plus-button"></div>
    <div class="sublist-wrap">
        <ul class="@subMenuCssClasses">
            <li class="back-button">
               <span>@T("SevenSpikes.Themes.Common.BackSublist")</span>
            </li>
            @foreach (var subCategory in subCategories)
            {
                @RenderCategoryLine(subCategory)
            }
        </ul>
    </div>
}

~~~
* In the 980.css file, add following lines of code
~~~

.sublist--double-columns, .sublist--triple-columns {
    min-width: 500px;
}
.sublist--double-columns > li, .sublist--triple-columns > li {
  display: inline-block;
}
.sublist--double-columns > li {
    width: 50%;
}
.sublist--triple-columns > li {
    width: 33.3%;
}