Full screen menu twentytwelve firefox/safari

  • Resolved theas91

    (@theas91)


    11 years, 1 month ago

    Ive managed to make the menu full screen and centered, but in firefox its become right aligned and half the menu is cut off. If I put a negative margin in the CSS itll be pushed way to the left in safari/IE..

    Is there another way for me to do this? The site is reidunbeate.com

Viewing 3 replies - 1 through 3 (of 3 total)

  • It displays to the right for me in firefox, chrome & IE, this is because you have given the ul a fixed position.

    Take off position:fixed and change text-align to center

    Dan

    EDIT: also take off that padding-left:30px; so that your overall css for that selector should look like this:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(237, 237, 237);
    border-top: 1px solid rgb(237, 237, 237);
    display: inline-block !important;
    margin-top: -30px;
    text-align: center;
    width: 100%;
}

    Just realised you have it fixed so the menu will scroll, in that case you want your CSS to be like this:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(237, 237, 237);
    border-top: 1px solid rgb(237, 237, 237);
    margin-top: -30px;
    width: 100%;
    display: inline-block !important;
    text-align: center;
    position: fixed;
    left: 0px;
}

    Thread Starter theas91

    (@theas91)

    That worked! Thank you so much! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Full screen menu twentytwelve firefox/safari’ is closed to new replies.