Return to previous page

How do I style the sidebar menu as in the examples

This topic has 7 replies, 3 voices, and was last updated 6 years, 2 months ago ago by Olga Barlow

wielandsmith

Participant

September 1, 2018 at 03:12

The sidebar menu on the homepage lacks the styling as seen in the demos. See link in private content.

Please, contact administrator
for this information.

#198764 Copied

6 Answers
Rose Tyler

Support staff

September 3, 2018 at 08:06
Hello,

Please add this code in Custom css for page http://prntscr.com/kpxiip :
```
.category-1 .product-categories h2 {
    background-color: #cda85c;
    padding: 20px 15px;
    color: #FFF;
    font-size: 16px;
    text-align: center;
}
.category-1 .product-categories > li > a {
    font: 13px/18px 'Roboto';
    display: inline;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding: 17px 0;
    padding-left: 20px !important;
}
.category-1 .product-categories {
    border: 2px solid #cda85c;
    margin-bottom: 0;
}
.category-1 .product-categories {
    margin-left: 0 !important;
    margin-right: 0;
}
```
Regards
#198802 Copied
wielandsmith

Participant

September 13, 2018 at 23:03

thank you – is there a way to make the header and footer full width?

#199445 Copied

wielandsmith

Participant

September 14, 2018 at 03:21

It didn’t work… Please see this page – https://thepetsupply.club/product-category/dogs/

I need to change it on every page.

Please, contact administrator
for this information.

#199450 Copied
Rose Tyler

Support staff

September 14, 2018 at 07:54
Hello,

The width of the footer can be changed via editing of your static blocks – http://prntscr.com/ku8tmv
Please change the previous custom css code to:
```
.category-1 .product-categories h2, #product_categories-1 h4{
    background-color: #cda85c;
    padding: 20px 15px;
    color: #FFF;
    font-size: 16px;
    text-align: center;
}
.category-1 .product-categories > li > a, #product_categories-1 li > a {
    font: 13px/18px 'Roboto';
    display: inline;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding: 17px 0;
    padding-left: 20px !important;
}
.category-1 .product-categories, #product_categories-1 {
    border: 2px solid #cda85c;
    margin-bottom: 0;
    margin-left: 0 !important;
    margin-right: 0;
}
#product_categories-1 h4{border: none;}
```
Let me know the result.

Regards
#199459 Copied
wielandsmith

Participant

September 14, 2018 at 17:00

of course! static blocks. The code didn’t work. Everything looks the same. These are shop pages… if that makes a difference?

#199494 Copied

Olga Barlow

Support staff

September 15, 2018 at 12:43

Hello,

If you want that styles as the default styles for that widget, not for the home page only then you need to use Custom CSS in theme options, not the page custom CSS. I have added correct code in your custom CSS.
Check if this is ok for you.

Regards

#199505 Copied
Viewing 7 results - 1 through 7 (of 7 total)