Left Sidebar Menu

Hi there,

1. In Customize > Layout > Primary Navigation, set the Navigation Logo Placement to: Sticky + Static

2. Try this:

#left-sidebar {
    height: 100vh;
    background-color: #222;
}

Make the background color match whatever you have set as your navigation background color.

Hope this helps :)

Hi Tom,

Thanks and it work amazingly for 1).

Had tried 2). but it still unable to stretch 100%

#left-sidebar {
height: 100vh;
background-color: #222;
}

Hi Tom,

Manage to solve the 2) by adjusting the menu height.

May also check if is possible to resize the left sidebar image size smaller?

Thanks !

Best Regards,
Richard

Give this a shot:

.gen-sidebar-nav .main-navigation .navigation-logo img {
    max-width: 200px;
}

Hi Tom,

Thanks and you have been great help !

Another thing am unable to figure out is CSS opacity:

#left-sidebar {
height: 100vh;
background-color: #222;
opacity: 0.5;

Because with above CSS, it also opacity for left sidebar
image and text. How can i opacity just on background ?

Thanks alot !

Hi Richard,

Try applying opacity to the background color instead of the entire left sidebar: background-color: rgba(86,86,86,0.42);

Hi Leo,

Thanks alot !

No problem!