How to modify the widget / sidebar design?

Support
#1

The default design of the sidebar is quite ugly:

How can I modify it? Is it possible to modify with Pro or only CSS?

Thanks

Carlos

#2

Hi There,

Thanks for writing in!

Pro content editor not for editing the sidebar design. Default side bar design only can be change through custom css.

Hope this is clear!

THanks

#3

OK! So any help / starting point to set the same background colour than the top menu with CSS, and use lower case on the items of the right menu?

On the other hand, how can I avoid that if we are on the top of the page, we see the top menu cut by the right menu:

However if we scroll down a little bit, the top menu is above the right menu?

Thanks

#4

Hi there,

Please try this CSS:

.x-sidebar {
    background-color: #ffdc43;
    box-shadow: 0em 0.15em 2em 0px rgba(0,0,0,0.15);
}

.x-sidebar .widget ul li a,
.x-sidebar .widget ol li a {
    text-transform: none;
}

Hope this helps.

#5

The sidebar is coloured now. Thanks!

The other problem still occurs. I have recorded a video to help you to understand the problem: https://youtu.be/KtOfj-qG7sI

#6

Hi Carlos,

It seems you are using Icon stack which by default, sidebar is fixed. When sidebar is fixed, it will stay on it’s place on right or left and doesn’t scroll. To avoid content overlapping, also by default the content was pushed. That’s what you are seeing when it is initially loaded. Now, the issue is, you have set your header to be sticky on scroll. To make it sticky and stay on top on scroll, means it will be fixed too. In CSS, fixed position means it will go to the desired location regardless of other content. A possible fixed will be to put the sidebar at the very top and then pushed the header content. See this: https://screencast-o-matic.com/watch/cblX0h2mCQ


@media (min-width: 1200px){
.x-sidebar {
    z-index: 99999;
}
.x-bar-fixed {
    padding-right: 250px;
}
}

Hope this helps.

#7

I love your solution. Thank you very much!! :slight_smile:

#8

You’re welcome :slight_smile:

#9

I have found a big problem of the above solution: the menu is BELOW the right sidebar! Please see the image attached…

How could I solve it :confused:

Thank you for your help!

#10

Hi again,

You can replace the previous code with the following code:

@media (min-width: 1200px){
.x-sidebar {
    z-index: 999;
}
.x-bar-fixed {
    padding-right: 250px;
}
}

Let us know how this goes!

#11

Thank you! I’m seeing another problem. This one is smaller problem.

Not all pages have the right sidebar. This is happening in those pages: https://youtu.be/1VKh3HLviEU

Thanks for your help

Carlos

#12

Hi Carlos,

Please change code to this.

@media (min-width: 1200px){
.x-sidebar {
    z-index: 999;
}
.x-content-sidebar-active .x-bar-fixed {
    padding-right: 250px;
}
}

Hope that helps.

#13

It’s not working well yet. Another video showing it: https://youtu.be/4LKhbN28waQ

The video shows the following pages in the same order:

  1. http://www.edinventa.com/compatible-smartphones/ (working well!)
  2. http://www.edinventa.com/ (working wrong: menu button is not align to the right)
  3. http://www.edinventa.com/awards/ (working wrong: overlapping)

Thanks

Carlos

#14

Hi there,

I am sure you will understand that we did our best here to give the customization you needed, but the customization is outside of our support scope and we will not be able to give further customization. You are welcomed to use the paid services of freelance developers in the X Facebook User Group.

Now the answer to the latest question. The first problem you see is the side effect of the latest CSS code given to you. In the code remove the

.x-content-sidebar-active .x-bar-fixed {
    padding-right: 250px;
}

Section of the code.

For the last page, unfortunately, there is no solution. If we make the menu go to the sidebar then the drop-down menu will go behind the sidebar.

The problems that you are facing now is because you want to customize with bits here and there to a stack which was not meant to work that way from the first place. Such customizations need the professional team to think through all possibilities and side effects. You will not get that level of customization from the support team for sure.

I hope I could explain the situation correctly here.

Thank you for your cooperation and understanding.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.