Docs

[Wardo_SD]

Hello,

I was hopping you could help me out. My url is http://absoluteoffi.wpengine.com/.
I am trying to achieve the header look of this website: http://www.absoluteoffices.com/
So I need the stacked header to have a left aligned logo with a text area right aligned. How could I achieve this? Is there possibly a way to add cornerstone columns in the logobar? Or is there an easy css way to do this? It also needs to be responsive whichever way we get this to work.

Thanks so much for your help! you guys are the best!

[Rupok]

Hi there,

Thanks for writing in! It would be a bit custom development but I am pointing you the direction.

#1. To add right side content, add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($) {
  var html = '<div class="header-contact"><h2>(505) 872-6790</h2><strong>7001 Menaul Blvd NE<br>Albuquerque, NM 87110</strong></div>';
  $( html ).appendTo('.x-logobar-inner .x-container');
});

#2. Let’s add this under Custom > CSS in the Customizer.

.masthead-stacked .x-brand {
  float: left;
}

.header-contact {
  float: right;
  text-align: right;
}

.header-contact h2 {
  font-size: 22px;
}

Let’s adjust the CSS if needed.

Hope this helps.

Cheers!

[Wardo_SD]

man you guys are the best! Thanks!! Super speedy too!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts