Grow your CSS skills. Land your dream job.

HELP: Centering Vertical Drop Down Menu for ALL Screen Resolutions? – Code Available

  • # October 1, 2012 at 12:39 pm

    Hello,

    This is my first post woo hoo! I need HELP on centering this Vertical Drop Down Menu both horizontally **and** Vertically for all screen resolutions?

    **[See CSS CODE Stylesheet](http://differentregard.com/css/homebg.css “homebg.css”)

    **[Here is what the Menu looks like on the Website](http://www.differentregard.com/home.php “Home Menu CSS Issue”)

    #nav {
    float: left;
    width: 280px;
    position: absolute;
    top: 40%;
    left: 42%;
    z-index: 1;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Century Gothic, sans-serif;
    color: #fff;
    list-style-type: none;

    I’ve been told to make it absolute. Sigh, right now either the menu moves up or down the larger the screen resolutions gets. Do I need to center the transparent bar too?

    # October 1, 2012 at 1:09 pm

    First: what should happen when you click on the first item? A submenu shows up but the dark bar in the middle doesn’t expand with it. Not sure if that’s what you intend or not.

    And yes, to center an element on page both horizontally and vertically, you’ll need the dimensions (fixed) and position it absolutely. A bit like this:

    #nav {
    position:absolute;
    left:50%;
    top:50%;

    width:340px;
    height:140px;

    margin-top: -70px /* half the height, negative */
    margin-left: -170px /* half the width, negative */
    }

    # October 1, 2012 at 1:26 pm

    Thank you Senff. What would the actual code be for the 280 width of my current menu?

    NOOB ALERT* And no I didn’t mean for that transparent bar not to extend with the drop down. LOL how can I change that?

    # October 1, 2012 at 2:35 pm

    @80sbaby: yea in your case 280 pixels. But you can make it smaller too, basically you just need the width that’s needed to contain all elements.

    I’d also remove padding from #nav, by the way.

    And of course — the #nav will be positioned absolutely, relative to any containers that are positioned relative. In this case, the clearbar.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".