Centering header elements

Tagged: 

Author Posts

robertlo February 1, 2016 at 9:26 pm

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 February 2, 2016 at 3:19 pm

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.