Docs

[JayCPT]

Hi,

I know there are a lot of questions here about header customisation but I haven’t been able to reach the result I am looking for.

I am looking to try and re-create a header similar to this (Stacked, logo to left (which I have been able to do), with functioning text and buttons to the right) – http://www.bodybalancephysio.com/pilates/

Is it possible to do this via header logo and moving the “topbar content” so that it becomes stack in mobile view?

Thanks in advanced,

Josh

[Rad]

Hi Josh,

Thanks for writing in.

It depends on your current setup, would you mind providing your sites URL that has logo and top bar? I’ll try if it can be done through CSS, if not, then template editing will be needed as well.

Thanks!

[JayCPT]

This reply has been marked as private.

[Rupok]

Hi Josh,

It could be done with some CSS. In that case we need a bit clarification. Do you want to change for mobile only? Would you attach a screenshot of what you are trying to achieve?

Cheers!

[JayCPT]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the clarifications! Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Displaying custom address, phone, etc
// =============================================================================
function add_custom_header_content(){ ?>
  
  <div class="custom-header-content right">
    <h3 class="man">01707 284 910</h3>
    <p>Clinics in Hertfordshire & North London </p>
  </div>

<?php }
add_action('x_before_view_global__brand', 'add_custom_header_content');
// =============================================================================

And after that, please go to your customizer, Appearance > Customize > Header > Logo & Navigation and set the layout as “stacked”.

Lastly, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .masthead-stacked .x-brand {
    float: left;
  }
}

We would loved to know if this has work for you. Thank you.

[JayCPT]

This reply has been marked as private.

[JayCPT]

I wrote something silly here and then worked it out as I sent it, ignore this. Haha.

[Joao]

Hi Jay,

Thanks for letting us know.

Joao

[JayCPT]

Hi Joao,

I am still unsure how to fix the alignment issue in resizing. Could I please get help with this?

Thank you,
Jay

[Joao]

Hi Jay,

Sorry for the mistake I got confused with the last message 🙂

Please add the following code to Appereance Customizer Custom CSS

@media screen and (max-width: 980px) {
.right {
  float: none !important;
  text-align:center !important;
  padding-bottom: 5px;
}
}

@media screen and (min-device-width: 481px)  { 
  
  .x-btn-navbar.collapsed {
    
    margin-top: 28px;
}
}

Let us know if you need help with any adjustments just let us know what you are looking for,

Thanks

Joao

[Joao]

Hi Jay,

Sorry for the mistake I got confused with the last message 🙂

Please add the following code to Appereance Customizer Custom CSS

@media screen and (max-width: 980px) {
.right {
  float: none !important;
  text-align:center !important;
  padding-bottom: 5px;
}
}

@media screen and (min-device-width: 481px)  { 
.x-btn-navbar, .x-btn-navbar.collapsed {   
    margin-top: 28px;
}
}

Let us know if you need help with any adjustments just let us know what you are looking for,

Thanks

Joao

[Author]

Posts