[Resolved] How to Make side Bars Like This

[Sourabh]

HI,

Could you please guide me on how to make sidebars like in the below website ??

Library list (These are category has been listed).

Please guide if possible.

[Leo]

Hi there,

Looks like they are using a navigation menu widget in the sidebar widget area.

Can you give that a shot first?

[Sourabh]

Leo, I didn’t get you, what is your meaning with shot first?

He might be using navigation but I don’t know, one thing I know he is using genesis theme with frame work so he has customized everything.

He has categories listed in side bar and last side bar is subscribe options for his social media..so I want to achieve that look, specially for categories hanging.. pls help..

And I bit weak in English so please write easy words for my better understanding.

Help me to make this.. pls..

Also let me know in the side bar area how to place ads banners etc?

[Leo]

Try using this widget in the sidebar widget area first:
https://www.screencast.com/t/OmLFNHaY0

[Sourabh]

yes did, created a new nav menu for side bar and linked with it, but its not looking in same way as i have requested, Refer below –

However, I have requested like below –

[David]

Try adding this CSS:

/* Set border and link styles */
.is-right-sidebar .widget.widget_nav_menu ul li a {
    display: block;
    position: relative;
    padding: 5px 0 10px;
    border-bottom: 2px solid #000;
    color: #000;
    font-size: 15px;
}
/* Change link color on hover */
.is-right-sidebar .widget.widget_nav_menu ul li a:hover {
    color: #f00;
}
/* Add > symbol */
.is-right-sidebar .widget.widget_nav_menu ul li a:after {
    content: '\003E';
    float: right;
    font-weight: bold;
}

[Sourabh]

where I should type this CSS ??

in customizer – Additonal CSS ???

??

[David]

Yes.

[Sourabh]

Yes it’s working, Just small correction needed, Need small height from the bottom, and how to type the text above like he has typed “library” –

https://www.shoutmeloud.com/how-to-start-a-beauty-blog.html

[David]

I have updated the CSS here:

https://generatepress.com/forums/topic/how-to-make-side-bars-like-this/#post-1555083

Those are Widget Titles – edit the Widget and enter your title in the field provided.
To center them and make them bold you would add this CSS:

.right-sidebar h2.widget-title {
    text-align: center;
    font-weight: bold;
}

[Sourabh]

Its done, thanku

[David]

You’re welcome

[Author]

Posts