[JamesZLParticipant]

Hi

Can I add a button looking like: <– back to homepage

On the top of specific pages, inline with the logo? Aligned to the right?

(like an extra menu button, just smaller in size and another placement)

[JoaoModerator]

Hi There, Please please place a Custom link on your Menu at Appereance | Menu | Add CUstom Link > Label it and position on the navbar where you want it to be.

Provide your URL and we will provide a css to customize that item specifically to look as you want.

Looking forward to help you.

Joao

[JamesZLParticipant]

This reply has been marked as private.

[LelyModerator]

Hi James,

Thank you for the credentials.
I think we do have misunderstanding. Let’s add this code instead on the specific page where you want the button to appear. On Cornerstone > Settings Tab > Custom JS:

jQuery(document).ready(function($) {
  $('<a href="http://jameszlin.com/" class="back-btn x-btn">BACK TO HOMEPAGE</a>').insertAfter('.x-brand');
  
});

Then on Custom CSS:

.back-btn{
  float: right;
}

I am not sure though, why you want that button because by default the logo is linked to your homepage.

Hope this helps.

[JamesZLParticipant]

Hi Lely yes we do!

What I would like is to add a customized menu button that looks like “<— back to homepage”

And it would be visible on the takeaway + levering menu (which brings you to the shop)

(because the menu bar changes when we go into the shop and so when people want to get back to the homepage, they’ll know easier that they just have to click that button instead of the logo)

[JoaoModerator]

Hi There,

Alternatively you can add the following code to Appereance Customizer Custom CSS

.x-brand::after { 
    content: " BACK TO HOMEPAGE ";
font-size: 17px;
  padding: 15px;
  background: red;
  border-radius: 5px;
  margin-left: 2%;
  margin-top: 130px !important;
}
.x-brand:hover::after {
  color: red;
  background: white;
 
}
.masthead-stacked .x-brand {
 
    width: 100%;
}

Hope it helps

Joao

[JamesZLParticipant]

Hi Joao

The codes are confusing my site and lots of the customization I’ve made with other areas of the site goes back to the standard format (for example the logo gets centered again, the sidebar cart widget gets standardized etc.)

It seems there’s no simple solution to adding a customizable extra menu button on the logo header area…

Anyway, thanks for trying!

[Rue NelModerator]

Hello There,

Sorry for the confusion. Do you want something like this http://prntscr.com/eo7zdy? If that is the case, since the child theme is already set up, please add the following code in your child theme’s functions.php file

// Displaying back button
// =============================================================================
function add_custom_back_button(){ ?>
  
  <?php if ( x_is_shop() || x_is_product() || x_is_product_category() ) : ?>

  	<a href="http://jameszlin.com/" class="back-btn x-btn right">&laquo; BACK TO HOMEPAGE</a>

  <?php endif; ?>

<?php }
add_action('x_after_view_global__brand', 'add_custom_back_button');
// =============================================================================

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

[JamesZLParticipant]

Hi Rue Nel

That worked great! No other areas were changed with the code.

One thing more – how do I style the button?
1 I would like to remove the border
2 And change the text so it isn’t all CAPS if possible…

[ThaiModerator]

Hi There,

Please also add this CSS:

.x-logobar a.back-btn.x-btn.right {
    border: none;
    text-transform: none;
}

Hope it helps 🙂

[JamesZLParticipant]

Works great!

One thing I just noticed – it doesn’t look good on iPad + mobile viewport

How do you make that function so it only appears on bigger viewports?

[Paul RModerator]

Hi,

Please change the code to this.

@media (min-width: 979px) {
.x-logobar a.back-btn.x-btn.right {
    border: none;
    text-transform: none;
}
}

Hope that helps

[JamesZLParticipant]

Hi Paul R

That makes the styling only appear in bigger viewports.

My question is, how do I make the “function” only appear in bigger viewports?

I used the code from Rue Nel above:

// Displaying back button
// =============================================================================
function add_custom_back_button(){ ?>
  
  <?php if ( x_is_shop() || x_is_product() || x_is_product_category() ) : ?>

  	<a href="http://jameszlin.com/" class="back-btn x-btn right">&laquo; BACK TO HOMEPAGE</a>

  <?php endif; ?>

<?php }
add_action('x_after_view_global__brand', 'add_custom_back_button');
// =============================================================================

How do you make this function only appear in “(min-width: 979px)”?

[FriechModerator]

Hi There,

Update the code little bit to this:

// Displaying back button
// =============================================================================
function add_custom_back_button(){ ?>
  
  <?php if ( x_is_shop() || x_is_product() || x_is_product_category() ) : ?>

    <a href="http://jameszlin.com/" class="back-btn x-btn right cs-hide-md cs-hide-xs cs-hide-sm">&laquo; BACK TO HOMEPAGE</a>

  <?php endif; ?>

<?php }
add_action('x_after_view_global__brand', 'add_custom_back_button');
// =============================================================================

Thanks,

[JamesZLParticipant]

Worked perfectly, good job!

[Author]

Posts