Twenty twelve centering navigation text

  • Resolved wldwil

    (@wldwil)


    9 years, 7 months ago

    I am working on a site at http://goo.gl/5Ut0PX using twenty twelve and a child theme
    I am using a child theme
    I am using Chrome tools to view style and trying to edit
    My navigation bar seems to be a bit left rather than centered. I do not think it should be that hard, but I am missing what I need to do to have it better centered.

    I usually use:

    /* center nav bar with header and top and bottom borders */
@media screen and (min-width: 600px) {
	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: none;
		border-top: none;
		display: inline-block !important;
		text-align: center;
		width: 100%;
}

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • CrouchingBruin

    (@crouchingbruin)

    9 years, 7 months ago

    The problem is that all of the menu items have a margin-right property set to 2.857142857rem in order to provide spacing between menu items. This including the last menu item, so that last right margin is throwing off the centering.

    What you can do is add this rule that sets the margin-right property of the last menu item to zero:

    .main-navigation li:last-child {
   margin-right: 0;
}

    Add it to the media query, right after that other rule that you cited.

    Thread Starter wldwil

    (@wldwil)

    9 years, 7 months ago

    That was worth at least a pint of beer. Thanks!

    I wish I could take time off sometimes just to better study WordPress. I spent his last winter getting to where I am now.

    I do appreciate the help.

    Thanks,
    Bill

    Thread Starter wldwil

    (@wldwil)

    9 years, 7 months ago

    I know I marked this resolved, but I just noticed on my drop down menu that it is popping the last drop down item to the right as well.

    Under services and tracked it back to my previous fix. Any hints on that one?

    CrouchingBruin

    (@crouchingbruin)

    9 years, 7 months ago

    Change the rule to this:

    #menu-all-star-menu > li:last-child {
   margin-right: 0;
}

    Thread Starter wldwil

    (@wldwil)

    9 years, 6 months ago

    Thanks again! I do not think I could have figured that one out.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Twenty twelve centering navigation text’ is closed to new replies.