Centering header elements

This topic contains 1 reply, has 2 voices, and was last updated by  Sebastian 6 years, 7 months ago.

Author Posts

robertlo

Sebastian,

I hope your 2016 is off to a great start! Quick question:

See http://173.254.96.214/~thinkrel/

On mobile, the Contact button with the search icon is not centered. That’s how the theme is coded I assume. I’ve been trying to center the button (with the search icon to the left of it of the button as is, but the button centered), but I can’t seem to find the fix for that.

Can you assist in this please.

Thanks,
Rob


Sebastian

Hi Robert,

You need to target the element that wraps the buttons with this selector:

.top_bar_right_wrapper

Then:

  1. Set float to none, overriding the current float:left value
  2. Give the element a width that is just big enough to hold the buttons e.g. 170px
  3. Set margin-left and margin-right to auto.

My experimentation using Chrome’s inspector shows these adjustments:

center buttons

Cheers!
Sebastian

You must login or register to reply to this topic.