Full-width menu not working in Chrome and Safari

Home Forums Older releases 1.0.x Full-width menu not working in Chrome and Safari

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #3318
    felicks
    Participant

    I have included the code for the justified full-width menu in my external css:
    @media (min-width: 768px) {
    #main-menu > li {
    float: none;
    display: table-cell;
    width: 1%;
    text-align: center;
    }
    }
    which works fine in Firefox and IE, but in both Chrome and Safari, the menu background is full-width, but the menu items do not span the whole screen and stay positioned to the left.
    Here is my test page: http://www.heartlanded.org/templates/test3.htm

    #3372
    admin
    Keymaster

    Hmm, seems like some weird CSS bug in Webkit/Blink. It seems to be caused by the fact that your main menu is nested in a table. Anyway, you can fix it by adding another rule:

    #main-menu {
    	width: 100%;
    }

    Edit: it’s best to add this inside the same media query as the above rule for the LI’s you’ve posted.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?