Logo on Lawyer Demo

[simonwr1976]

Thanks again for your reply.

I understand that it works best on larger screens and that for the smaller screen it would work better if the logo was vertical. I also understand that I could incorporate the logo into the header bar using the header builder., but none of those things creates the look I’m trying to achieve.

Essentially for the 1288 screen you’ve shown above I want to replicate the look for the larger screen. In my mind that means moving over the main content to the right to incorporate the logo on the left. I understand that i’ll probably need to make the logo smaller for this screen size as well.

Can you help me with the css to achieve this?

I have one more issue that I’m trying to resolve on the contact page. In the section ‘map location v2’ which appears just above the footer theres an image to the left and global blocks to the right. The columns appear to be 80:20 at the moment and I can’t find how / where to change this.

[ruenel]

Hello @simonwr1976,

In the Lawyer demo site, as soon as the screen size gets smaller, there is no logo being displayed on the header. It will look like this:

Regretfully, what you are trying to do goes beyond the structure and default CSS of the Lawyer demo site. What you have in mind may require restructuring the header or adding custom CSS to make it possible. Be advised that the needed customization is beyond the scope of support as we only cover getting your site set up, bug fixes, and minor cosmetic changes.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

We could not find the map section on your contact page. Anyways, if the column layout is 80:20, please click the row and in your settings, you can adjust the column layout.

Hope this helps. Thanks.

[simonwr1976]

Thanks for this.

I have one more thing, this time for the header on wider screens. See the screenshot attached the logo navber and e-mail / tel all look unbalanced. I’m not bothered about them all being lined up horizontally, but if this is not acheivable then I’d like the logo aligned horizontally with the logo. I just want it to look more balanced

[ruenel]

Hello @simonwr1976,

Do you want it to look like this?

In your Cornerstone > Theme Options > CSS, please find this CSS block:

.x-topbar .x-container .p-info {
    position: absolute;
    top: 50px;
    right: 0;
    width: 450px;
}

You need to change the line top: 50px; to top: 0px; so that it will be aligned.

Best Regards.

[simonwr1976]

thanks, that’s done it

[tristup]

Hi Simon,

Glad that it works.

Thanks

[simonwr1976]

hello again,

One more slight issue. I’ve noticed that the logo when it is used on wider screens doesn’t have a hyperlink, is it possible to add one?

[tristup]

Hi Simon,

In larger screens the Logo used as a Background Image and adding hyperlink is not possible to that. But you can add the following custom JavaScript code into the Theme Options > JS which may help you on this

jQuery(document).ready(function($)
{
    jQuery('.site').before().click(function () 
    {
        console.log('clickable!');
        var base_url = window.location.origin;
        window.location=base_url;
    });
});

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks