Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

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
  • October 26, 2016 at 18:46 #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

    November 2, 2016 at 15:34 #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.

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘1.0.x’ is closed to new topics and replies.