SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center content on a full-width dropdown menu

    Hi all,

    I am working on the following project: Click here to view website It is being built using Wordpress.

    If you hover over the Tailoring link in the top navigation, you will see a drop-down menu with thumbnails. This dropdown menu is powered by a plugin called Ubermenu. I have adjusted the CSS to make the drop-down menu stretch across the full-width of the screen. However the problem is that the content of the drop-down menu is positioned on the left. How can I get the content of the drop-down menu to appear nicely in the center of the page?

    Thanks in advance,

    GKTareen

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hi.

    If I'm reading the (slightly over-complicated) code correctly, the items are in a menu called sub-menu which is absolutely positioned. You probably don't have to absolutely position it. You could leave it a block and set a width smaller than the width of the screen and use auto-margins to center it.

    However if the items' number can vary (can more be added?), then it might be safer to do something like...

    If you leave the submenu abso-po'd, make it 100% width of its parent (seems it already is) and give it text-align: center. This won't center it, but if you then make each li display: inline-block (instead of float), they'll take on the inline nature of being affected by the text-align on their parent, while also retaining block nature by being able to have dimensions set.

    IE 6, and 7 don't like inline-block on naturally block elements like li's. If you are not supporting them then the above should work. If you are supporting them let me know.

    Give it try and see how it goes. I would, for while testing, force the parent thing to remain display: block (instead of none) so you can always see it instead of having to mouse over it all the time. Then I'd give your submenu ul an ugly background colour like #f00 so you can see exactly where its dimensions are.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    remove the float:left from the following rule and it should center automatically.

    Code:
    #megaMenu li.ss-nav-menu-mega ul.sub-menu-1 > li {
      display: inline-block;
     /* float:left;*/   
     margin-bottom: 5px;
      margin-top: 5px;
      position: relative;
    }

  4. #4
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    remove the float:left from the following rule and it should center automatically.

    Code:
    #megaMenu li.ss-nav-menu-mega ul.sub-menu-1 > li {
      display: inline-block;
     /* float:left;*/   
     margin-bottom: 5px;
      margin-top: 5px;
      position: relative;
    }
    Wow, that was awfully simple. Thank you very much Paul. Much appreciated!

    GKTareen

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If youe need to support IE6 and 7 you will need this fix:

    Code:
    #megaMenu li.ss-nav-menu-mega ul.sub-menu-1 > li {
      display: inline-block;
    *display:inline;/* ie6/7 invalid hacks*/
    zoom:1.0; /* ie6/7 invalid hacks*/
    /* float:left;*/   
     margin-bottom: 5px;
      margin-top: 5px;
      position: relative;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •