Add More Information into Logo Bar

Hi,

I would like to add some more information into the Logo Bar on X Theme.

I would like to add the following either side of the logo.

Right Side:
Phone Number
Email Address
Both to be clickable

Left Side:
Some Text
A calendar date that is controlled from the admin section

See attached,

Hi,

Thanks for writing in!

You can easily achieve that using PRO Headers.

Kindly refer to the links below.


https://theme.co/apex/forum/t/elements-tips-and-tricks/214

Hope that helps.

Thanks Paul,

Is there a way to centre the logo using Pro?

Also if I make changes to the header in Pro and then there is an update will it be overwritten?

Thanks
Sam

Hi Sam,

Can you clarify what you mean by changes on the header? If you are editing the core files you should do on your child theme and that won´t be overwritten, but I don´t see the need to change the core files to achieve the layout you are looking for.

You need to create two bars in Pro.

The first bar, you will add 3 containers. The first container you will a text element and your calendar shortcode.

The second container you will add the logo and on th third another text element and add your content there.

On the second bar you will add your inline menu element which you will click on the customize tab and hide for the smaller screens and add the mobile menu element, click on the customize tab of the element and hide for the larger screens where you have your inline menu showing.

Hope it helps

Thanks Joao,

That works great thanks :smile:

However, could you tell me how I centre my logo, second container.

Also can I centre the inline menu in the second bar?

Thanks
Sam

Hi Sam,

Click on the container > Horizontal align > Center.

Hope that helps, if that does not help, please provide your URL so we can take a closer look.

Thank you.

@Joao I’ve tried that to all containers but it doesn’t change and the center one still isn’t in the middle.

See screenshot

Thanks
Sam

Hey Sam,

Can you please share the URL of your site so we can take a look?

Thanks!

@Nabeel I can no problem but I’m currently building the site so the current site isn’t the correct one

Is there anything else we can do?

Thanks
Sam

Hi there,

The size of each container could affect the alignment too. How about setting a max width to each of your content? But I can’t guarantee that it’s going to be effective since the layout is controlled by flex options. It’s still best if we can test it directly.

Thanks!

@Rad I’ve set the max with on both the text areas.

The one on the left 600px
The one on the right 400px

And have enabled both text columns on each. This seems a bit of a bodge job, are you able to take a look?

I’m also concerned as to how the header will look on different size screens. Would you advise the set a new header for each different size screen?

Thanks
Sam

Hiya Sam,

You may find the following helpful: https://theme.co/apex/forum/t/elements-tips-and-tricks/214

As Pro uses Flexbox and with Flexbox, each container will effect the next container with the child elements, so the alignment may not be exactly as you expect without changing other values in the header builder. The above video covers things like centering, alignment, working with Flexbox etc.

Then just like Cornerstone, Pro has visibility controls. This means what you might want to do is add a mobile specific bar, so add a new bar to your header, set everything for display as you want on mobiles and then hide that bar on desktops and laptops. That way you have one header, but multiple bars. This is the most common way that other users handle the responsiveness of bars and headers.

Thanks!

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