Docs

[Antony H]

I want to add a small image to the logobar of the renew stack.

I tried adding this code to the _brand.php file of my child theme, but it didn’t work:

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo ( is_front_page() ) ? '<h1 class="visually-hidden">' . $site_name . '</h1>' : ''; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>
<p class="here-to-help man x-hide-sm x-hide-xs"><img src="http://freshly-squeezed-design.co.uk/greasetrap/wp-content/uploads/2017/02/Here-to-Help.jpg"></p>

So, instead, I tried to add a background image to the logobar, but that doesn’t work because:

1. The image aligns to the left of the screen, not the container.
2. The image is still visible behind the logo on smaller devices.

Can you help me please?

[Antony H]

This reply has been marked as private.

[Antony H]

Sorry, I meant “the image aligns to the right of the screen”, not “the image aligns to the left of the screen”.

[Thai]

Hi There,

Please remove your custom CSS and try with this CSS instead:

.x-logobar {  
    border-top-style: solid;
    border-width: 3px;
    border-color: #02aa94;
}
.x-logobar .x-container {
    background: url(http://freshly-squeezed-design.co.uk/greasetrap/wp-content/uploads/2017/02/Here-to-Help.jpg) no-repeat center right;
}
@media (max-width: 800px){
    .x-logobar .x-container {
        background-image: none;
    }
}

Hope it helps 🙂

[Antony H]

Thanks Thai, you are a superstar!

[Thai]

If you need anything else please let us know.

[Antony H]

Actually, sorry to bother you again, but I noticed a new issue.

I keep adding styling to my UberMenu via the Customizer, but this keeps being lost somehow. This means I have to keep restyling the menu how I’d like it to look to override the default ‘Vanilla’ styling.

Can you help please?

[Lely]

Hello Antony,

Do you mean you’re adding in X theme customizer CSS that is not working? Or you been adding it on Ubermenu option for custom CSS? Please clarify.
Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– CSS you’ve been adding and screenshot and details you’re trying to achieve.

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Antony H]

Hi Lely,

I have only been changing the settings in the Customizer, as I said, and I haven’t added any custom CSS outside of this. I can style the menu bar so that it looks just as I want it to appear and it works fine. However, the styling keeps intermittently resetting itself to the default ‘Vanilla’ styling. If you look at the front end of the site you will see it [should] appear exactly how I’ve styled it. However, every so often and without warning this is lost and I have to reapply my settings.

Thanks.

[Antony H]

This reply has been marked as private.

[Antony H]

Just in case the settings have been lost here is a screenshot of what they should look like. I’ve made changes to the font-size, colours, font-weight and spacing.

[Rue Nel]

Hello There,

Thanks for updating in! Since you have a child theme, please add the custom css in your child theme’s style.css file instead:

.x-logobar {  
    border-top-style: solid;
    border-width: 3px;
    border-color: #02aa94;
}
.x-logobar .x-container {
    background: url(http://freshly-squeezed-design.co.uk/greasetrap/wp-content/uploads/2017/02/Here-to-Help.jpg) no-repeat center right;
}
@media (max-width: 800px){
    .x-logobar .x-container {
        background-image: none;
    }
}

Please keep in mind that the customizer will automatically remove forward slash and backward slash to prevent any conflicts with the json results in saving and loading of the customizer. This could be the reason why.

Please let us know how it goes.

[Antony H]

Morning Rue,

Thanks for your input. I think you missed a couple of earlier posts though 🙂

My issue relates to the styling of the UberMenu, the logobar is working just fine now thanks.

Thanks!

[Paul R]

Hi Antony,

Can you provide steps on how to replicate this issue.

Your menu looks the same as your screenshot on my end.

It could be a cache issue with your browser.

Thanks

[Antony H]

Hi Paul,

Sadly, that’s the issue – there isn’t any obvious ‘trigger’ that is causing this to happen. I’m just merrily working away in Cornerstone and then, every so often, the menu styling resets without warning!

I also thought it could be a caching issue, but having tried other browsers and devices it doesn’t seem to be.

I’m baffled!

[Author]

Posts