[Resolved] Left Sidebar Menu

[Richard]

Hi,

i have some issue with left sidebar menu.

1) When at the top of the page, logo will disappear after scrolling down it appear.
How can i set logo to sticky as well?

2) How to set the left sidebar Menu to screen size height, so the website can only scroll on the right side which is the content.

Appreciate your help as have been trying alot of ways but unable to get it done.

[Tom]

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 🙂

[Richard]

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;
}

[Richard]

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

[Tom]

Give this a shot:

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

[Richard]

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 !

[Leo]

Hi Richard,

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

[Richard]

Hi Leo,

Thanks alot !

[Leo]

No problem!

[Author]

Posts