Topic: Icon's Sidebar | Themeco Community

Tagged: x

← 1 2 3 →

Author

Posts

October 9, 2016 at 4:18 pm #1209124

cauhemotta

Participant

I can see the error in your printscreen…

October 9, 2016 at 10:34 pm #1209342

Lely

Moderator

Hi There,

From the reply here:https://community.theme.co/forums/topic/icons-sidebar/#post-1208543

Please update this part:

  .admin-bar.x-icon .x-sidebar {
    left: calc(calc((100% - 900px)/2) - 140px);
  }

To this:

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

Hope this helps.

October 10, 2016 at 8:12 am #1209889

cauhemotta

Participant

Hi Lely,

Yes, it helped! Thanks for that!

But we have a bigger problem now. I opened the site on my mac (using firefox) and the sidebar was all the way left (see attached file).

Why is this happening and how can we fix it?

Also, I would like to not see the sidebar when using a Ipad or mobile (small screens). In this cases, the side bar appears in the end of the content. What code can we use for that?

October 10, 2016 at 12:13 pm #1210185

Nabeel A

Moderator

Hi again,

Please add the following code in your Customizer:

@media screen and (min-width: 1200px) {
    .admin-bar.x-icon .x-sidebar {
        left: calc((100% - 900px) / 2 - 150px) !important;
    }
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

October 10, 2016 at 6:44 pm #1210618

cauhemotta

Participant

Hi!

Thanks for your reply, but didnt work at all. Still the same on my Imac. I tried using chrome and firebox.

This is all Custom CSS I am using:

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

.x-navba,
.x-logobar {
    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;
  }

  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;
  }

  .admin-bar.x-icon .x-sidebar {
    left: calc(calc((100% - 900px)/2) - 150px);
  }
}
@media screen and (min-width: 1200px) {
    .admin-bar.x-icon .x-sidebar {
        left: calc((100% - 900px) / 2 - 150px) !important;
    }
}

October 11, 2016 at 2:06 am #1211033

Christopher

Moderator

Hi there,

Please add this code:

@media screen and (max-width: 979px){
.admin-bar.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;
}
}

Hope it helps.

October 11, 2016 at 7:44 am #1211361

cauhemotta

Participant

Hi guys,

I am really worried now.

What I am figure out is that it is not working AT ALL when we are not logged in the admin. If I set the website ON, not under construction, the side menu is there, all the way left, like no change was made in the Custom CSS.

We have +20 replys here and I have absolute nothing.

Please, please, please: Take a good look how can we make it work and reply me with a complete CSS suggestion, not codes to ADD.

I am counting on you, have no more time to waste on this.

Tks

October 11, 2016 at 8:48 am #1211428

Joao

Moderator

Hi There,

Please contact your hosting provider and ask if they are running some type of cache.

Seems like they are.

Let us know how it goes,

Joao

October 11, 2016 at 12:07 pm #1211750

cauhemotta

Participant

Hi Joao,

Just asked then (hostgator Brazil). They do not run any type of cache.

And I can see all changes I did in texts, pictures…

October 11, 2016 at 1:11 pm #1211844

Nabeel A

Moderator

Hi again,

Please update your theme to the latest version, Install the Child Theme and move all the Custom CSS from Appearance > Customize > Custom > Edit Global CSS: to the Child Theme’s style.css file and see if this resolves the issue.

Let us know how this goes!

October 14, 2016 at 12:00 pm #1216370

cauhemotta

Participant

Hi,

Just did, and didn’t worked.

That´s all the CSS I’m using (all in the child Theme’s style.css now)

.x-sidebar .max.width {
    padding-top: 15%;
    padding-bottom: 0%;
}

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

.x-navba,
.x-logobar {
    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;
  }

  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;
  }

  .admin-bar.x-icon .x-sidebar {
    left: calc(calc((100% - 900px)/2) - 150px);
  }
}
@media screen and (min-width: 1200px) {
    .admin-bar.x-icon .x-sidebar {
        left: calc((100% - 900px) / 2 - 150px) !important;
    }
}
@media screen and (max-width: 979px){
.admin-bar.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;
}
}

October 14, 2016 at 9:06 pm #1216908

Rue Nel

Moderator

Hello There,

Thanks for the updates! I made some changes in your custom css in the child theme. I am using this:

/*

Theme Name: X &ndash; Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

.x-sidebar .max.width {
    padding-top: 15%;
    padding-bottom: 0%;
}

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

.x-navba,
.x-logobar {
    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;
  }

  .admin-bar.x-icon .x-sidebar {
    left: calc(calc((100% - 900px)/2) - 150px) !important;
  }
}
@media screen and (min-width: 1200px) {
    .admin-bar.x-icon .x-sidebar {
        left: calc((100% - 900px) / 2 - 150px) !important;
    }
}

@media screen and (max-width: 979px){
  .admin-bar.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;
  }
}

And I got this result: http://prntscr.com/cu000a

I would recommend that you clear your browser cache first or use private browsing mode before testing your site. If you are using Chrome, please try to view your site with incognito mode.

Hope this resolves the issue. Please let me know.

October 16, 2016 at 6:46 am #1218054

cauhemotta

Participant

Hi Rue,

I really appreciate all your attention!

When I am logged in, it works perfectly (same as your printscreen). Please take a look at the first attached file.

The problem is when we are NOT LOGGED IN. It doesn’t work AT ALL. Please, take a look at the second attached file.

I tried using different browsers, computers, Mac, Windows… It’s all the same. When you are not logged in, doesn’t work.

The site is in under construction mode, but fell free to deactivate it temporarily and see by your self.

Looking forward to solve this.

Tks

October 16, 2016 at 7:09 am #1218072

Christopher

Moderator

Hi there,

Update following codes in style.css file:

@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;
  }

  .admin-bar.x-icon .x-sidebar {
    left: calc(calc((100% - 900px)/2) - 150px) !important;
  }
}
@media screen and (min-width: 1200px) {
    .admin-bar.x-icon .x-sidebar {
        left: calc((100% - 900px) / 2 - 150px) !important;
    }
}

@media screen and (max-width: 979px){
  .admin-bar.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;
  }
}

To :

@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;
  }
}

Hope it helps.

October 16, 2016 at 5:48 pm #1218574

cauhemotta

Participant

Yes! It is finally working!

Thanks a lot Christopher and all X team

Author

Posts

← 1 2 3 →

<script> jQuery(function($){ $("#no-reply-1205557 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>