Need two columns in header - Ethos

Support
#1

My client would like a logo on the left side, and a quote on the right side in the header. I would like to make two columns so that on a mobile device, these would stack. Currently I have one long image filling up the header that contains both the logo and the quote, but on a mobile device, it gets super tiny. Is there a way to have two columns in the header?

Here is what I am trying to achieve:

#2

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

#3

Sure, here you go; http://devsite.expressbooksellers.com

#4

Hi,

Thank you for providing your site url.

You can add the code below in your child theme’s functions.php file.

function add_header_right() { ?>
<div class="header-right">
    "Until I feared I would lose it, I never loved
     to read. One does not love breathing."
     <span>- Harper Lee, To Kill A Mockingbird</span>
</div>

<?php
    
}

add_action( 'x_after_view_global__brand', 'add_header_right', 10 );

Then add this in Theme Options > CSS

.header-right {
display:block;
   width:250px;
   float:right;
   font-size:15px;
}

.header-right span {
    font-size:12px;
}

@media(max-width:767px) {
.header-right {
     display:block;
     width:100%;
    float:none;
}
}

Hope this helps.

#5

OK I’ve added the code, but how do I add the images to the columns?

#6

It appears there are two rows in my header now, the original one, and one with rows? I am not sure how to get my final desired result.

#7

Hi there,

You will have to crop the current header image you have where the text on the right will be cropped out because that is what the code previously provided will do.

Please also update:

.header-right {
    display:block;
   width:250px;
   float:right;
   font-size:15px;
}

to

.header-right {
    display:block;
   width:250px;
   float:right;
   font-size:15px;
   color: #000;
}
#8

Great - thank you!!!

#9

Now can I add some space above the quote text so it’s more centered?

#10

Hello @StacieB,

Thanks for updating thread. :slight_smile:

You can add following CSS under under X > Theme Options > CSS:

.header-right {
    margin-top: 25px;
}

Thanks.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.