Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Mainmenu, mainMenuSub and subMenuSub

Home Forums Older releases 1.0.x Mainmenu, mainMenuSub and subMenuSub

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #3041

    How can I change the fixed width of the Main menu? (Should be possible with a parameter in the next release.)

    The right 30 pixels (or so) on the main menu cannot be used for text. How can I make use of the full width?

    With mouse over a mainMenuSub item it makes a wordwrap (even with mainMenuSubOffsetX set to 0). How can I avoid that wordwrap?

    On mouse out from mainMenuSubs and subMenuSubs the height of the item suddently increases by some 10-20 pixels. It is not necessary and devastating to the general use of the menu. How can I avoid it?

    On mouse out to a new submenu it unexpectedly drops by some 10 pixels. This means, that if you have the mouse positioned parallel the these upper 10 pixels and drags it to the right, then you loose hold of the menu and will have to start all over again from tha main menu – up tp several levels back. How can I avoid that drop or have it reduced to 1 pixel?
    If the submenus must cascade they should do it when they are shown, and not wait until on mouse out from the level above.

    The 3 last items above each in their own way makes the the menu slow and unstable to use. They reduce the general usability of the menu. I do not dare ask my users about their opinion on the menu – but I do not seem to have any alternatives.

    I use the vertical simple version.



    You’ve listed a number of issues that are most probably caused by some custom CSS you’ve added or things you’ve tried to customize. I would suggest if you can’t cope with the configuration of the theme on your own without any major issues to just use one of the default themes as it is without trying to customize anything.


    Thanks for the reply

    You are partly right:

    The ups and downs in heights were due to change to this:
    .sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active {
    padding: 13px 20px;

    I had reduced both the vertical and the horizontal padding.
    Going back to default means that:
    1. The space for each menu item is now much higher than necessary and preferable. (I might run short of space on smaller screens).
    2. The space for text in the items is reduced slightly.
    I would like both the vertical and the horizontal padding in this selector to be reducable all the way down to 0 px (3-5 in practise for both) without any dynamic change in height or change to word wrap to the items when they are toggle-/path-active. That is the way I think it should be default.

    Further the two first items on my list still remains:

    1. How can I make the main menu itself wider (For me by some 15 to 30 pixels. For others may be more) to provide more space for text?

    2. How can I make the right some 20-40 pixels of the mainmenu-items available for text (in addition to the above)? Now the text wraps around much too early.

    PS: I use vertical simple


    1) You could use something like this:

    @media (min-width: 768px) {
    	#main-menu {
    		width: 300px;

    2) You could use something like this:

    @media (min-width: 768px) {
    	#main-menu > li > a {
    		padding-right: 0;

    Thank you

    I have now inserted this selector into my shadow css-file:
    @media (min-width: 768px) {
    #main-menu{width: 300px;}
    #main-menu > li > a{padding-right: 3px; }

    The #main-menu > li > a{padding-right: 3px; } works perfect and I can have text all the way to the right border. And what is more: The items seems have stopped to change hight on focus / not focus. The menu is now well underway to be a dream to use.

    Then ‘#main-menu{width: 300px;}, #main-menu{width: 200px;}, #main-menu{width: 500px;} does not change a thing on the total width of the main menu.

    And a new one:
    On the left side of my menu-texts I have an unused space of some 20px.
    I believe it is space reserved for the ‘subIndicatorsText’.

    I do not use the subindicators (have set the indicator to space).

    I might suggest that you in the next release introduce a js-parameter ‘subIndicatorsDisplay’ true|false. On false the space should be released for menu-text. – With a posibility for ‘ #main-menu > li > a{padding-left: 3px; }’.

    In the meantime any suggestion on the change of the total width of the main menu?


    Could you please post a link to some kind of live demo? It’s very difficult to try to debug without being able to see/test your code. Thanks!


    So sorry!!!!!!!!

    I have found an error in my CSS-settings. Now it works fine on main-menu width.

    You can see the menu at



Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘1.0.x’ is closed to new topics and replies.