Bug with theme

[kristabrunette]

Hello,

I purchased Themeco X and have installed one of your available themes (mlaw). The issue is the logo appearing. I want the logo to appear on the left of the menu, but right now it only appears when viewed on a smaller screen such as a mobile device or tablet. No custom code has been added. It seems like it’s being caused by a bug of some kind. The logo appears if you change certain settings, but it’s overlapping with the top bar content and the placement is off.

Please advise as this should not be an issue.

[ruenel]

Hello Krista,

Thanks for writing in!

I am seeing this:

This is not a bug. You have installed a demo site by which in this demo, a custom CSS was added to achieve certain styling. To resolve your issue, please go to X > Theme Options > CSS and find this custom CSS block:

@media (min-width:1441px){
    .site:before,.site:after{
        content:"";
        display:block;
        position:absolute;
        background-image:url(http://grewallawfirmp.wpengine.com/wp-content/uploads/2021/02/logo.png);
        background-repeat:no-repeat;
        background-size:cover;
        width:107px;
        height:24px;
    }
    .site:before{
        top:0;
        transform:rotate(-90deg) translate(-87%,0);
    }
    .site:after{
        bottom:6em;
        transform:rotate(-90deg) translate(36%,0);
    }
}

In the code block above, you will have to replace the:
background-image:url(http://grewallawfirmp.wpengine.com/wp-content/uploads/2021/02/logo.png);

with the following:
background-image:url(//grewallawfirmp.wpengine.com/wp-content/uploads/2021/02/grewal-law-firm.png);

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Hope this makes sense.

[kristabrunette]

@ruenel thank you for your response. Please find the screenshot I took attached. As you can see, there is no visible logo, when there should be at least one logo visible. Please note that I would also like to remove the line from the mobile view.

The image has been shared in the secure note details.

[ruenel]

Hello Krista,

Be advised that you are using the Lawyer demo which has a unique and custom CSS. The logo is not displaying because, in X > Theme Options > CSS, we have added this by default:

.x-brand {
  display: none;
}

If we remove this code, your logo will display:

And to remove the line in smaller screens, you need to remove this custom CSS in X > Theme Options > CSS:

.x-navbar {
    border-top: 3px solid #b9965c;
    
  }

Hope this makes sense.

[kristabrunette]

@ruenel thank you for your feedback. How would I then go about removing the mwlaw logo and adding more space on the right of my logo?

[ruenel]

Hello Krista,

You will need to remove this CSS block to remove the mwlogo on the left side:

/*
// (min-width: 1340px)
// -------------------
// 01. Background logo positioning for very large screens.
// 02. Dimensions should match logo used in Theme Options. Original logo
//     is 214x48 but halved for retina display support.
// 03. Logo is rotated and then translate value should be adjusted to suit.
*/

@media (min-width: 1441px) { /* 01 */
  .site:before,
  .site:after {
    content: "";
    display: block;
    position: absolute;
    background-image: url(http://grewallawfirmp.wpengine.com/wp-content/uploads/2021/02/logo.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 107px; /* 02 */
    height: 24px; /* 02 */
  }
  
  .site:before {
    top: 0;
    transform: rotate(-90deg) translate(-87%, 0); /* 03 */
  }

  .site:after {
    bottom: 6em;
    transform: rotate(-90deg) translate(36%, 0); /* 03 */
  }
}

Kindly let us know how it goes.

[kristabrunette]

I tried removing the custom CSS, but if I do that, then the address and contact information merge together, because it appears there isn’t enough space. Given, that in your screenshot there is a lot of space where the mwlaw. logo is, this shouldn’t be occurring. Please advise on how this can be resolved.

[tristup]

Hi Krista,

I have removed the code from Theme Options > CSS which mentioned by my colleague in his post, and didn’t find any issue with the Address and the Contact Information which you mentioned in your last post. Can you please provide any screenshot marked with the issue to help us to recognize the problem. I am adding the removed code, as you may required it for furture purposes.

@media (min-width: 1441px) { /* 01 */
    .site:before,
    .site:after {
    content: "";
    display: block;
    position: absolute;
    background-image: url(http://grewallawfirmp.wpengine.com/wp-content/uploads/2021/02/logo.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 107px; /* 02 */
    height: 24px; /* 02 */
    }
    
    .site:before {
    top: 0;
    transform: rotate(-90deg) translate(-87%, 0); /* 03 */
    }

    .site:after {
    bottom: 6em;
    transform: rotate(-90deg) translate(36%, 0); /* 03 */
    }
}

Thanks

[kristabrunette]

Hi @tristup

Please find the image attached highlighting the issue. As you can see, when I remove the code below, this causes a misalignment.

.x-brand {
display: none;
}

It should be straight forward, replacing the mwlaw logo with my own logo. Instead it is proving to cause many issues. Is there anyone who can help me resolve this in a timely manner?

page example.png

[prakash_s]

Hello Krista,

I checked your site, Please remove these custom CSS code from the X--->Theme Option --->CSS to get the proper Header of your site.

@media (min-width: 1048px) {
  .x-topbar .x-container .p-info { 
    position: absolute;
    top: 50px;
    right: 0;
    width: 450px;
  }
}
.x-brand {
  display: none;
}
.masthead-inline .desktop .x-nav {
  float: left;
}

If you remove the code the header output would look like this.

Hope it helps
Thanks