Docs

[cauhemotta]

Hi,

I am playing with some possibilities for my new site.

When using a Van Bar Position fixed Left, it is fixed all the way left.

I would like it fixed on the left size of the Boxed Content.

Please see the attached files.

(07) – The way it is now
(08) – The way I want

tks

[cauhemotta]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! It turns out that you have a related topic here: https://community.theme.co/forums/topic/icons-sidebar/

To resolve your issue, please use this code instead:

@media (min-width: 1200px){
  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,

In the other topic I was talking about the sidebar. In this one, I am talking about the Nav Bar, as you can see in the files attached.

Please let me know if its clear

[Rue Nel]

Hello There,

If you want to have the navbar on the left side of the boxed content, that would be on top of the sidebar. By default, as soon as you set the navbar as fixed left, this is what you will get.
http://prntscr.com/crlkv8

I am not sure how will you do it, fixed left navbar and the fixed sidebar. Regretfully we cannot support any modifications to the header or site layout other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly based on options in the Customizer. Among these, the header is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great and we are a very small team. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[cauhemotta]

Hello,

Sure, I understand you. But there was a misunderstanding here.

I was not planning to use left navbar and left sidebar together. I just would like to know how to do this, and know what can I do with my site design.

To simplify, let’s forget my site for now and use a X demo. How could I move the left nav bar in that example near to the boxed content? Please see the attached files.

Thanks again!

[Christian]

I see. Regretfully, that is not possible without custom development. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thank you for understanding.

[cauhemotta]

But we are changing the position of an existing element don’t we? The same we are trying to do with the side bar (see my other topic: https://community.theme.co/forums/topic/icons-sidebar/).

Why we cant do this in this case and could do in the other?

[Lely]

Hello There,

Navbar and Sidebar have different position and structure relative to the main content area.
Making this changes might result to some display issues. We can try adding this custom CSS, unfortunately, we cannot help you further than this.

@media (min-width: 1200px){
.admin-bar .x-navbar-fixed-left, .admin-bar .x-navbar-fixed-right {
    left: calc(calc((100% - 900px)/2) - 150px);
}
}

Thank you for understanding. This changes will not work together with your current setup which is fixed sidebar.

[Paul R]

Hi,

You can achieve that by setting your navbar position to fixed left then do the following.

1. Add this in Custom > Edit Global Javascript in the customizer

jQuery(function($) {
  $('.x-navbar-fixed-left-active .masthead').prependTo('.x-main');
});

2. Add this in Custom > Edit Global CSS

.x-navbar-fixed-left-active .x-navbar-fixed-left {
    position: absolute;
}

body.x-navbar-fixed-left-active {
    padding-left: 0;
}

.x-navbar-fixed-left-active .x-main.full {
    padding-left: 300px;
}

Hope that helps.

[cauhemotta]

Hi!

Thank you for your reply. I really appreciate it.

I will try this modifications later. If I don’t use this setting is this website, I can use it in a future one.

I am on my second X license, and I would love to continue buying new licenses for my future websites and friends websites, considering I can do almost every design with X. It is great to do not have to spend hours looking for options on Themeforest.

Again, is really great to had your support is this question and know I can count on the support of you.

Cheers

[Joao]

Hi There,

Glad to hear it, I totally agree with you, X is so flexible you really don´t need to spend time looking for a different theme.

Reach us whenever you need assistance 🙂

Thanks

Joao

[Author]

Posts