Centering menu links

  • VDiaz

    (@vdiaz)


    13 years, 10 months ago

    The site is http://keithfabryretail.com/

    i’m trying to center the menu links between the red division lines.

    I tried adding the text-align and also playing with the padding, but no luck… what else could it be?

    #access a {
	color: #000;
	display: block;
	padding: 0 2em;
	line-height: 3.333em;
	text-decoration: none;
	text-align: center;
Viewing 5 replies - 1 through 5 (of 5 total)
  • channeleaton

    (@channeleaton)

    13 years, 10 months ago

    The problem is with the position of the background image. Play around with the background-position-x attribute.

    Thread Starter VDiaz

    (@vdiaz)

    13 years, 10 months ago

    Hi and thanks for helping me with this… i’m looking but don’t find the background-position-x attribute…. please advise.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 10 months ago

    He means on line 602 style.css (I recommend using a child theme from this stylesheet), there is CSS

    #access li {
float: right;
position: relative;
background: url(images/menu.jpg) no-repeat right;
}

    Could be

    #access li {
float: right;
position: relative;
background: url(images/menu.jpg) no-repeat left;
}

    and do the same for the :hover status

    Thread Starter VDiaz

    (@vdiaz)

    13 years, 10 months ago

    Thanks for stepping in, appreciate it.

    I changed the right to the left and now there’s too much space on the other side… any other suggestions?

    channeleaton

    (@channeleaton)

    13 years, 10 months ago

    How about replacing that background attribute with this:

    border-right: 1px solid red; (or put in the hex value for whatever color you want)

    That way you get rid of an http request and speed up load times?

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

The topic ‘Centering menu links’ is closed to new replies.