full width, "justified" nav bar in twenty twelve theme

  • foldingchariot

    (@foldingchariot)


    10 years, 2 months ago

    Hi all,
    I’ve seen similar topics in the forums but none of the solutions are working for me. I’m building a simple wordpress site and want to make the nav bar (below the header) expand so it occupies the same width as the header. The page tabs in the nav bar will remain fixed, but the space between them will expand. I have a child theme set up and have made changes to the original style sheet in the child theme.
    the website is http://nathanhodges.net/wp/

    thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • batharoy

    (@batharoy)

    10 years, 2 months ago

    This is the best I could do. The problem is between 670-600px item 3&4 overlap, you may be able to fix it by changing the @media query. It happens cause the 3rd menu item is longer. Maybe someone else has a better fix.

    .nav-menu > ul > li {
    width: 16.66%;
    text-align: right;
}

.nav-menu > ul > li:nth-child(1), .nav-menu > ul > li:nth-child(2) {
    text-align: left;
}
    Thread Starter foldingchariot

    (@foldingchariot)

    10 years, 2 months ago

    hey thanks! that did the trick, although I ended up reducing width to 12.5%. I’ll have to check it on some other screens and see how it looks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘full width, "justified" nav bar in twenty twelve theme’ is closed to new replies.