Remove grey border around image in topbar

[andre1980]

Hi,

My knowledge about CSS is still pretty basic and I can’t get my head around how to remove the grey border around the image I inserted in topbar content box, in theme options:

I’m using Integrity light. I have searched for the CSS file (integrity-light.css) but it’s hard to read inside wordpress and it says it has 6 errors…while I have never touched this file before, perhaps something for you guys to look at?

Anyway, I hope you guys can help me with this issue.

CSS I use now is:

/***** Topbar *****/
@media only screen and (min-width: 800px) {
.x-topbar {
display: none !important;
} }

.x-topbar .x-topbar-inner.x-container.max.width {
width: 100%;
max-width: none;
background-color: #e0922e;
}

.x-topbar {
border:0 !important;
background-color: #e0922e;
height: 480px;
display: inline;
}

/* logo in topbar */
.topbarlogo {
border: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding-top: 103px;
padding-right: 40%;
padding-left: 40%;
margin-top: 0px;
padding-bottom: 103px;
margin-bottom: 0px;
/*max-height: 274px !important; */
background-color: #e0922e;
}

As you can see I have tried several things already here, but the border remains.
For clarification: it is a logoimage which may only show on mobile and the backgroundcolor #e0922e should fit the rest of the screen, without the grey border from integrity.

[nico]

Hi @sitepower,

THanks for writing in.

I could not be able to see the grey border around the image of your topbar.

Would you mind sharing us a screenshot where it is located.

Thank you so much.

[andre1980]

[mldarshana]

Hi There @sitepower

Could you please try adding the following CSS rule into your X > Theme Options > CSS area and see if that helps.

@media(max-width:767px){
  .x-topbar .p-info {
    background-color: transparent;
  }
}

Hope that helps.

[andre1980]

Yes! That did the trick. Many thanks!

[basanta]

You are most welcome!

[andre1980]

There is another issue concerning this image in top bar: It seems the logo is moved all the way to the left when I change my screen size to a certain position. It is supposed to stay in the center on the screen. All the CSS I use with breaking points are set to 979px. So, I have no clue why it is changing after a different breaking point and thus where to find the problem.

[christian]

Hey @sitepower,

It’s because the Topbar content is floated to the left on desktop and the floating is only removed starting from 767px breakpoint. Please add this to your CSS

@media (max-width: 979px) {
.x-topbar .p-info {
    text-align: center;
    float: none;
}
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[andre1980]

Thanks so much! Now the topbar works like a charm

[nabeel]

Hi again,

Glad it worked. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!