Docs

[cauhemotta]

Hi,

I would like to have the Icon’s sidebar I am using not fixed all the way left on the screen, but fixed on left side of my boxed content. How can I make that?

This way, the site will looks good in any sreensize.

[cauhemotta]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[cauhemotta]

Sure

Please check the attached files.

Today is (01)

I would like (02)

Thanks!

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

 .admin-bar.x-icon .x-sidebar {
     left: 4.9%;
}

Hope it helps

Joao

[cauhemotta]

Hmm, not really…

Please see the files attached. Depending on screen size, the sidebar position change. I would like it fixed on the left side of the boxed content.

[Rue Nel]

Hello There,

TO move the Icon sidebar inside the boxed layout, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@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 {
    padding-left: 300px;
  }

  .admin-bar.x-icon .x-sidebar {
    left: 8.5%;
  }
}

We would loved to know if this has work for you. Thank you.

[cauhemotta]

Hi,

Thanks for your attention. but unfortunately it still not working properly.

Please see the attached files. The sidebar is not fixed on the left side of the boxed content area. Depend the screen size, the sidebar moves.

[Rad]

Hi there,

Would you mind providing a mockup screenshot of how it should be? By means of fixed, does it mean static to the left? Just confused of term fixed since it also means independent scrolling in CSS.

Thanks!

[cauhemotta]

Hi,

Please check the file attached. This distance (X in the image) changes when screen size changes. I would like the sidebar menu fixed in the left border of the Boxed content.

For exemple: Imagine the sidebar was part of the content menu. If content menu is 1200px and side bar is 300, this the ”site content area” will be 1500px.

Not talking about scrolling.

I hope this helps. I am in a hurry to solve this.

Thanks!

[Rue Nel]

Hello There,

Thanks for the updates! You have create another thread with this same issue. I already responded it. Please check out the solution in out reply in this topic: https://community.theme.co/forums/topic/icons-nav-bar-position/

We would loved to know if this has work for you. Thank you.

[cauhemotta]

Hi,

In the other topic I was talking about a different issue, as you can see in my reply there.

Anyway, the code you suggested didn’t worked also (see the attached file and the gap between the SideBar and the Boxed Content).

You can see it live using the access I provided.

Tks for all the attention

[Rue Nel]

Hello There,

Sorry if it didn’t work out. Please have it updated and use this instead:

@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) - 140px);
  }
}

Please let us know if this works out for you.

[cauhemotta]

Hi Rue!

Yes, it is working! Thanks for that!

There is just a small detail, as you can see in my attached file. I think the sidebar is not positioned perfectly.

In your printscreen we can see the same happening.

[Rupok]

Hi there,

I have checked and it seems positioned on my end for all screen size – http://prntscr.com/crpial

Let’s check again and confirm the screen size or if you are facing this n any specific page.

Thanks!

[Author]

Posts