Home>Support>SubMenus width on Vantage Premium

SubMenus width on Vantage Premium

By ccie10391, 7 years ago. Last reply by Bjarne, 6 years ago.

Hi Folks,

Have a question kinda related to this thread:

SubMenus on Vantage Premium.

I’m using premium version of Vantage theme and want to tweak a bit the way submenus look. AFAIK by default way submenues are displayed using common width of 200px. The submenus I am using are quite long for this width and I tried the workaround suggested in the link above. However that workaround has two side effects:
1. When you hover pointer over this menu item it highlights only part of the menu item, which has characters. The rest of the menu item remains unhighlighted. Basically each submenu item has its own highlighted width.
2. Some of submenu items (which are kinda short) are arranged in one line as two of them fit the current submenu width.

Currently I am using tweaked value of width in this style.css item:
.main-navigation ul ul a {
width: 200px;
padding: 15px 20px;
}
Obviously it changes the way how all the submenus look like. Is there a way to use dynamic width for the submenus, like width:100% suggested in the thread referred above, but without side effects I described?

BTW, thanks much for this really nice theme!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 6 months ago Andrew Misplon Hi, I Work Here

    Hi ccie10391

    Give this a try under Appearance > Custom CSS:

    /* Vantage Sub Menu Width */
    
    .main-navigation ul ul a {
    min-width: 250px;
    width: auto;
    white-space: nowrap;
    }
    

    Set the min-width to where you want it. Things should hopefully be dynamic past that min-width.

  2. 7 years, 6 months ago ccie10391

    Wow, thanks for a very quick response, Andrew!
    This tweak kinda works for #2, but #1 is stil the same. It looks better now, with min-width. However with submenues, in which some items are longer than min-width, the rest of submenu items have shorter highlight area.

  3. 7 years, 6 months ago Andrew Misplon Hi, I Work Here

    For sure. Please can you send through a link and I’ll take a look at this live on your site.

  4. 7 years, 6 months ago ccie10391

    Sure, here it is:
    http://dialog-leader.com/
    a good example will be submenu under “services” in the main menu.
    Thanks a lot!

  5. 7 years, 6 months ago Andrew Misplon Hi, I Work Here

    Give this a try:

    /* Vantage Sub Menu Width */
    
    .main-navigation ul ul a {
      width: auto !important;
    }
    
    .main-navigation ul ul li {
    min-width: 250px;
    white-space: nowrap;
    width: 100%;
    }
    

    Works for me.

  6. 7 years, 6 months ago ccie10391

    Works like a charm! Thanks for your support, Andrew!

  7. 7 years, 6 months ago Andrew Misplon Hi, I Work Here

    Super, glad we could help.

  8. 6 years, 3 months ago Bjarne

    Still works! Thnkx! :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More