Menu Selections

I have one top level menu that has several categories.  On normal sized monitors, I noticed the header drop down menus will scroll past the end of the screen, and it is difficult to select items passed the bottom of the screen.  Is it possible to change the height of the menu tables so additional categories will appear or split it into two columns?  In other words, I am trying to get the subcategory listing to be more compact?  I would like to do the same thing in the left hand column (but not split it). 

Any help or suggestions will be appreciated.

Hi Richard,


If I have understood correctly in case you have too much element in your 'sub menu' you can not scroll to the very bottom of this menu in case it height is bigger than the screen height. So you can solve  the problem by adding the following styles in the '980.css' file:

.header-menu .sublist-wrap {max-width: 500px;}

You can use other value instead of 500px. This will make your sub menu maximum height of 500 pixels, and if it is bigger than 500,  scroll will appear.  

If this is not what you want to accomplish, please send us back a screenshot of the problem.

This is really two questions, but somewhat related.  

1.  Can I reduce the height of the categories menu rows on the left side, so I can get more categories visible on the page?  

2.  Can I reduce the height of the header drop down menus rows so more can appear on the screen or split the drop down menu into two columns?  

I will PM you with some screen shots.

You can simply reduce the height of the categories in the left side. You just need to change one value in the 'styles.css' file (which you can find in '~Content/CSS/styles.css').
Look for the code below and just change the bold value to "5px". This will make the line lower.

.block .list a {
    border-top: 1px solid #c9c9c9;
    display: block;
    padding: 9px 10px;
    position: relative;
    transition: all 0.2s ease-in-out 0s;
}

If you like you can copy only the line bellow in the 980.css file and the category menu in side will looks lower only in the desktop resolution.

.block .list a {
    padding: 5px 10px;
}

About the second question, you can use the same approach with reducing the items height. In the file '980.css' find the following styles and change the bold value only:

.header-menu .sublist a {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    border-bottom: 1px solid #c9c9c9;
    color: #505050;
    display: block;
    line-height: 14px;
    padding: 11px 15px;
    ...
}

Here you can set value of 7px for example. There are no option to use two columns in the drop down menu. Also you can have different amount of subcategories on different levels so the other approach (maximum height and overflow ) will not be option. I saw that there is lot of element in 'gift accessories' and this is only second level sub menu. In this case you can try to add this code, but kept in mind that if you have some sub menus one level down, it wont works.

.top-menu > li > .sublist-wrap > ul > li > .sublist-wrap {
    max-height: 300px;
    overflow: auto;
}

This will limit you second level sub menu to maximum 300 pixels and let you get to all of the items in the menu by scrolling up and down. If you decide to try this you need to add this styles in the '980.css' file.

Peter, this worked perfectly as normal.  Thanks for your help, patience, and support.

Richard