Need help? Check out our Support site, then


sub-menu float right problem

  1. songsofhope883
    Member

    Hi
    My blog is Superhero theme and I have the design upgrade. I currently have a menu full width (done with some CSS addition). I want to go back to the narrow default menu location to the right of the Title. When I do this, my submenus extend to the right beyond my browser window so I cannot see the submenu items or select them.

    Is there a way to make submenu items come out to the left rather than the right when my mouse goes over the menu and sub-menu items?

    Many Thanks
    songsofhope883

    The blog I need help with is songsofhope883.com.

  2. @songsofhope883, it looks like you have the menu back up to the right of the site title. Since you are using submenus and sub-submenus, and since your menu labels are shorter, I might suggest setting the width of them narrower. The following in your CSS has the default 175px, but you might try taking that down to perhaps 130px or 140px and see what you think.

    .main-navigation ul ul a {
    width: 130px;
    }
  3. songsofhope883
    Member

    Thank you thesacredpath for this suggestion and code. I have put it in as you say. The second sub-menu under words-for-life is still cut off, but its a lot better. It seems that flying out to the left is not an easy thing to implement.

  4. I've done some further digging, and give this a try and see what you think. It aligns the submenus off the right corner of the parent top level menu item instead of off of the left corner.

    .main-navigation ul ul {
    right: 0;
    }
  5. songsofhope883
    Member

    Hi thesacredpath. I tried this out but it gave me an unpredictable result. Does the css have to go in one particular place in the customizing CSS box?

  6. When I tried it with Firebug, I put it at the bottom of your CSS and it worked fine, but I now see it is going wonky where it didn't when I first tried it.

    Add this instead and make sure that the values for the width in .main-navigation ul ul a and the left in .main-navigation ul ul match (except for the negative sign).

    .main-navigation ul ul {
    left: -140px;
    }
  7. songsofhope883
    Member

    Hi thesacredpath. This now works! I see what you mean. Its a little unusual but could well achieve what I want. My aim in all this has been to come up with a simplified menu with say only 3 items, but with more submenu layers. My problem in the past is that I run out of real estate to the right. Your solution gives me more space to the right. Many thanks!

  8. You are very welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic