Hey there, I’ve just added the lawyer demo to a site I’m building - https://ruralcare.newwebsitepreview.co.uk/.
I’ve added the logo via theme options > headers, but it’s not showing on the front end, it’s still the demo logo, what am I missing?
Hi @simonwr1976,
Thanks for reaching out.
The mwlaw is an image set through the Global CSS, please go to the Theme Options > CSS and remove the background-image attribute at line no. 302. Please find the screenshot describing it.
Hope it helps.
Thanks
Thanks for your reply.
I’ve changed out the background image and commented out the 90 degree rotation. I’d like the logo to be on the same line as the nav bar for large screens
Hello @simonwr1976,
Thanks for writing to us.
It seems that the logo has been set as hidden through the custom CSS code. I would suggest you go to Theme Options > CSS and remove this CSS code.
.x-brand {
display: none;
}
OR Add this code to display the logo
.x-brand {
display: block !important;
}
Please note that the code provided above serves as a guide only and it would ultimately be your responsibility to take it from here. If you are unfamiliar with code and resolving potential conflicts, you may opt-in on our One service for further assistance.
Thanks
Thanks again for your reply, but that’s not quite what I want.
Changing x-brand to display: block !important it’s added the logo back to the traditional header row, but the logo that I replaced the law logo with is still partly showing.
I really wanted the law logo replacing with the new logo, but this to be displayed horizontally, at the moment it is partially hidden
Hi @simonwr1976,
If you want to show the logo which replaces the Lawyer logo, you need to increase the Height and Width and need to change the background-size from cover to contain just under the where you replace the Logo at the line 304 to 306.
Please replace those lines with the following lines.
background-size: contain;
width: 270px;
height: 48px;
Please remember that the above code will work if copied as it is and doesn’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
thanks again, nearly there.
how do I add the padding to the top to match the rest of the content and where is the topbar controlled? it has min-height 46px?
Hi @simonwr1976,
I am not quite sure what do you to achieve at this moment, would you mind explaining it further? It would also be helpful if you could provide us screenshots on the final output you wanted.
Thank you.
ok, no worries
I’ll try and be clearer
I’ve used inspector and the blue section as shown in the screenshot below has padding-top:1.75em, I want the logo to have the same top padding
Above the navbar there’s also x.topbar which has a minimum height of 46px, I want to remove this also, but can’t find where it is controlled
Hi Simon,
Padding will not work on that pseudo logo. Use margin-top: 1.75em; instead. Add margin-top: 1.75em; to the logo CSS rule.
Add this to Theme Options > CSS to overwrite the topbar’s min-height: 46px
header .x-topbar {
min-height: 0;
}
Hope it helps,
Cheers!
Thanks again.
Two more things. I’ve added the facebook icon shortcode to the text section to the right of the nav bar, but the shortcode isn’t working, how do I fix this?
Also the logo is repeated at the bottom of the page, where is this added? how do I remove it?
Hello @simonwr1976,
1st query
It seems that you have inserted the shortcode on the Topbar content. Please note that the shortcode is not going to be rendered from the Topbar. To make the shortcode render please have a look at this thread for reference.
2nd query
I am not able to see the logo on the footer. Would you mind sharing the exact page URL so that we can check and advise you properly?
Please note that the code provided in the reference thread serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer or you can avail our services called One where customization questions are answered.
Thanks for understanding
Thanks again.
1st query sorted, thanks.
2nd query, logo was visible on the screenshot I attached, it’s partially shown in the bottom left.
Going back to the logo issue, i’m on a slightly smaller laptop today (14inch screen) and the logo to the left of the header isn’t showing, how do I get round this?
Hi Simon,
That is the same CSS code that outputs the Logo on the header, so you can not remove that entirely.
@media (min-width: 1441px) {
.site:before, .site:after {
content: "";
display: block;
position: absolute;
background-image: url(https://ruralcare.newwebsitepreview.co.uk/wp-content/uploads/2021/09/cropped-rural-care-logo-full-outlin-e1497198044422.png);
background-repeat: no-repeat;
background-size: contain;
width: 270px;
height: 48px;
margin-top: 1.75em;
}
}
Just modify that code and remove this part, , .site:after (yes including that comma).
That is how the demo is designed on that specific screen size. But if you need the logo to show on that size, please add this to Theme Options > CSS
@media (min-width: 979px) and (max-width: 1440px) {
.x-brand {
display: block;
}
}
Thanks,
Thanks again.
The first bit is now sorted, bottom logo removed.
With regards to the second bit, that e=media query wouldn’t give me what I wanted as that would display the logo within the navbar container.
I copied over the media query for the larger screen sizes and tweaked it for this screen width, but the logo is off the screen to the left. I’m happy to move the navbar and the content in that container further right to make it fit, but I’m not sure how?
Hi Simon,
I have just checked your website and found that the Page Template has been completely changed and the issue described here is not exists. Can you please check and confirm that you are still having the issue, if so, please mention the page URL where you are having that.
Thanks
Thanks for your reply.
Not sure I understand your comments, the screenshot I sent you was for the homepage - https://ruralcare.newwebsitepreview.co.uk/
Hi Simon,
It seems that you have removed a few predefined custom CSS that comes with the Lawyer demo, and also modified it by adding it only for the smaller screen. That is why the content shifted towards the left and override the logo. I have checked and found those CSS codes, please add to the Theme Options > CSS.
.site
{
padding-left: calc((50vw - (1170px / 2)) + 1em);
padding-right: 3em;
}
.site:before
{
left: calc(((49vw - (1170px / 2)) - (107px + 2vw)) + 1em);
}
.site:before
{
content: "";
display: block;
position: absolute;
background-image: url(https://ruralcare.newwebsitepreview.co.uk/wp-content/uploads/2021/09/cropped-rural-care-logo-full-outlin-e1497198044422.png);
background-repeat: no-repeat;
background-size: contain;
width: 270px;
height: 48px;
margin-top: 1.75em;
}
I have added the same through Browser Debugger Tool and it works, please find the screenshot below.
Hope it helps.
Thanks
Hello Simon,
The horizontal placement of your logo will only look good in larger screen sizes usually more than 1400 pixels. If you view the site on any screens smaller than that, your logo will be cut off. Actually, the Lawyer demo design works best if the logo will be placed vertically.
More than 1400 pixels:
Less than 1400 pixels:
If you want to have the logo + navigation + the information text displayed horizontally, it is best that you create a custom header. You can go to Cornerstone > Header Builder and create a custom header so that you have more control over the elements in your header and without using any complicated CSS.
Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.
Hope this makes sense.