Docs

[yhshin1020]

Hey,

I am going for a look like the picture below.

I want to be able to make a few changes to the main sidebar I have on my website.

1) remove the border around the list.

2) decrease spacing between list items

3) remove the arrow > icon on the left of each item.

4) change the font size and font family of the items.

Thanks!

[yhshin1020]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS:

.widget_nav_menu ul li a, .widget_meta ul li a, .widget_pages ul li a {
    border: none;
    box-shadow: none;
    padding: 5px 15px;
    font-size: 18px;
    font-family: 'Lato', sans-serif;
}
.widget_nav_menu ul li a:before, .widget_meta ul li a:before, .widget_pages ul li a:before {
    display: none
}

Hope it helps 🙂

[yhshin1020]

How do I remove the border around the sidebar?

Thanks!

[Thai]

Please also add the following CSS:

.widget ul, .widget ol {
    border: none;
}

Hope it helps 🙂

[yhshin1020]

This reply has been marked as private.

[Lely]

Hi There,

1.) Please use this:

.widget_nav_menu ul li a:hover,
.widget_meta ul li a:hover,
.widget_pages ul li a:hover {
    background-color: transparent;
}

I can see you have this custom CSS to make the color yellow on hover and when it is active:

.widget a:hover {
    color: #eea904 !important;
}
.widget_nav_menu .current-menu-item > a {
    color: #eea904 !important;
}

2.) Use this:

.x-sidebar .widget {
    margin-top: 2em; /*Adjust this accordingly to your preferred spacing*/
}

Hope this helps.

[yhshin1020]

This reply has been marked as private.

[Lely]

You’re welcome!

Please also use this:

.widget_nav_menu .current-menu-item>a {
    background-color: transparent;
}

Hope this helps.

[Author]

Posts