Edit sidebar

Support
#1

Hi,
I’ve created a sidebar (called learning sidebar) and I want to change it’s appearance.

  1. For some reason, all of the text in the sidebar is underlined. Is it possible to change that?
  2. Is it possible for the page that is currently being viewed to be marked in a different color?
  3. How can I make the sidebar be mobile friendly? I would like it to be a drop-down in mobile view

Thanks,
Alon

#2

Hello @alonmg,

Thanks for asking. :slight_smile:

  1. Of Course it’s possible to remove underline in sidebar texts. All you need to do is use .x-sidebar .widget ul li a selector and then apply CSS text decoration property to none. For example, here is the code that you can use:

.x-sidebar .widget ul li a {text-decoration: none;}

  1. I am not entirely sure about the question. Can you please elaborate?

  2. Question is kind of confusing. But as per my understanding please take a look at following plugins:



Thanks.

#3

Thanks so much!

  1. Can you dumb-down your answer for me? Where do I find “.x-sidebar .widget ul li a”? And if I apply none, how can I then change the way the text shows up?

  2. When a user navigates to a page, I want the color of the page-link on the sidebar to be marked with a box and a different color, so it’s clear where they are on the site.

  3. What I mean, is that when viewing the website in mobile version, the sidebar shows up on the bottom. I want it to be contained in a drop-down module, like made possible in the header builder. That way, it can be reached at all times by the user. Should I use the header builder for this or is there another way?

Thanks!

#4

Hi there,

  • the .x-sidebar .widget ul li an is actually the CSS selector which you can use. And the text-decoration: none is the code responsible to remove the underline. So kindly add the code below to Pro > Launch > Theme Options > CSS:
.x-sidebar .widget ul li a {text-decoration: none;}
  • Unfortunately there is no built-in way to do so. THis goes to the customization process which is outside of our support policy. I suggest that you use a Javascript code to search for each anchor tag of the sidebar and compare it with the current URL of the page and if there is a match, you can change the color of the link. Something like this:
jQuery('.x-sidebar a').each(function() {
	if (jQuery(this).attr('href') == window.location.href) {
		jQuery(this).css('color', 'yellow');
	}
});

The code above will change the link color to yellow, you can use any color code such as #ff0000. Needless to say that this is only a starter help to give you an idea of how you can customize the current link. A further implementation is outside of our support policy.

  • Our theme does not have such a functionality and you will need to do the customization for that. The request can be implemented with the combination of HTML CSS and Javascript coding. I did a Google Search for you which can be a good starting point for your customization.

Thank you.