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.
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.
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.
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
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.
thanks, that’s done it
Hi Simon,
Glad that it works.
Thanks