Docs

[airman23]

Hi,
I have my site setup with the integrity stack and put the logo in stacked mode and aligned it left. I would like to be able to add text to the right of the logo (contact info same as screen shot example). Also, I think I will need to use some CSS to hide this text when the site is displayed below a certain resolution. Can you please assist me in how I could achieve this. Thank you very much.

[airman23]

Typo in the title, meant text to the right of the logo (as per screenshot).

Thank You

[Christopher]

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. Once you have provided us with your URL, we will be happy to assist you with everything.

[airman23]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for writing in! Depending on the content you will be putting to the right of the logo this may get a bit complex that it may fall beyond our scope. However if it is just simple text you can use a combo of jQuery and CSS.

You can add this under Custom > Javascript in the Customizer.

jQuery( document ).ready(function( $ ) {
 $(".x-logobar-inner .x-container.max.width").append('<div class="logo-text">Your Content Here</div>');
});

Just change the “You Content Here” text to your text. You will also need to use CSS to get it to be on the same line as the logo.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

Use this if you want it right next to the logo.

.x-logobar-inner .x-container.max.width {
    display: flex;
}

If you wanted floated all the way to the right, then remove this previous code and use this instead:

.logo-text {
    float:right;
}

That should do it. Let us know how that goes. Hope this helps – thanks!

[airman23]

Thank You very much for the prompt response. I got this working 90% by using the following code:

jQuery( document ).ready(function( $ ) {
 $(".x-logobar-inner .x-container.max.width").append('<div class="header_widget_header"><div class="header_textwidget"><h3>Los Angeles</h3><span STYLE="color: #003922; font-size: 14pt">323.722.6555</span></div></div><div class="logo-text"><div class="header_widget_header"><div class="header_textwidget"><h3>Vancouver</h3><span STYLE="color: #003922; font-size: 14pt">604.525.6507</span></div></div><div class="header_widget_header"><div class="header_textwidget"><h3>Calgary</h3><span STYLE="color: #003922; font-size: 14pt">403.253.6580</span></div></div></div><div class="header_widget_header"><div class="header_textwidget"><h3>Ayr</h3><span STYLE="color: #003922; font-size: 14pt">519.740.6500</span></div></div></div>');
});

and the following CSS:

.header_widget_header {
    float: right !important;
    text-align: right;
    margin-top: 0px;
    margin-left: 40px;
    z-index: 100;
    position: relative;
}

.header_textwidget{
    float: right !important;
    text-align: right;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 100%;
    vertical-align: baseline;
}

@media (max-width:  979px) {
	.header_widget_header {display: none;}
}

If you look at my site now, the only issue I’m having is that the added text is a line or two below the logo. Is there anyway I can put this directly inline with the logo without having the white gap above the text?

Thanks Again.

[Rupok]

Hi there,

Thanks for writing back.
You can add this under Custom > CSS in the Customizer.

.header_widget_header .header_textwidget > h3 {
  margin-top: 0;
}

Hope this helps.

Cheers!

[airman23]

Thank You very much that worked perfectly! Really appreciate the extra support. This was my first time with the X template, but it definitely won’t be my last. Consider me a repeat customer.

Thank You Again.

[Nabeel A]

Thank you for your kind words! We’re glad we could help 🙂

Cheers!

[Author]

Posts