Docs

[Nico]

Happy to hear that

Feel free to ask us again.

Thanks.

[cauhemotta]

Hey Nico,

I asked before to include a CSS to not see the sidebar in mobiles. I changed my mind and yes, I would like to see it normally, like it is in yours demo: http://demo.theme.co/icon-7/

What changes do we need to do in my CSS to allow it again?

And please, how can I remove the black space between the sidebar widgets text areas (images). Please check the image attached.

This is all the custom CSS I am using um my child theme now:

.x-sidebar .max.width {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0%;
    padding-bottom: 0%;
}

.x-navbar .desktop .x-nav>li>a>span {
    border: 0;
}

.x-navbar,
.x-logobar,
.x-colophon.bottom {
    border: none !important;
}

@media (min-width: 1200px){
  body.x-sidebar-content-active, body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active {
    padding-left: 0 !important;
  }

  body.x-sidebar-content-active .site, 
  body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active .site {
    width: 100%;
    max-width: 900px !important;
    padding-left: 300px;
  }

  .x-icon .x-sidebar {
    left: calc(calc((100% - 900px)/2) - 150px) !important;
  }
}

@media screen and (max-width: 979px){
  .x-icon .x-sidebar {
    display:none;
  }
  body.x-sidebar-content-active .site, body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active .site {
    padding-left: 0 !important;
  }
}

[Paul R]

Hi,

You can remove the code that reads.

@media screen and (max-width: 979px) {
.x-icon .x-sidebar {
    display: block;
}

}

Then add this in your custom css to remove the gap.

.x-sidebar .widget {
    margin-top: 0;
}

Hope that helps.

[cauhemotta]

Hi,

I left this part of the CSS like this:

@media screen and (max-width: 979px){
  .x-icon .x-sidebar 

  body.x-sidebar-content-active .site, body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active .site {
    padding-left: 0 !important;
  }
}

Just removed the:

{
    display: block;
}

Is that ok?

About the gap, it was removed, tks!

[Joao]

Please try

Changing :

@media screen and (max-width: 979px){
  .x-icon .x-sidebar 

  body.x-sidebar-content-active .site, body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active .site {
    padding-left: 0 !important;
  }
}

to

@media screen and (max-width: 979px){
  body.x-sidebar-content-active .site, body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active .site {
    padding-left: 0 !important;
  }
}

Let us know how it goes,

Joao

[cauhemotta]

Perfect!

Thanks

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts