Equalizing Sidebar

Hi there,

Any chance you can unlock your site for people in Canada or UK to view?

That’s where we are located.

It’s really hard for us to provide a custom solution like this without seeing the setup.

@leohsiang – unfortunately our IT department has set up the site in such a way that it’s only viewable to people in the U.S.

Best,
Lora

Is there a chance to set up a staging site that’s opened for the other countries?

Then you can duplicate the existing site over so we can see the issue.

It would certainly help us to provide a custom solution.

Thanks.

@leohsiang – I’ve asked our IT office to unlock the site so you can view it. Please let me know if you can see the site now. My main issue is that I want the left-hand sidebar to run all the way down the page. I couldn’t figure it out with the GeneratePress theme.

Thanks so much,
Lora

Try this CSS to sort of trick it:

#left-sidebar {
    background-color: #006075;
}

It’s not possible to extend the sidebar into the footer though.

• This reply was modified 4 years, 4 months ago by Leo.

@leohsiang , this worked! Thank you soooo much!!!

No problem ??

@leohsiang, a quick follow-up question: the left sidebar menu extends as expected but when viewed on medium sized screens e.g. laptop it does not. It will work for large and small screens but not medium sized screens. Is there a way we can correct this? Take a look at this page: https://student.sccld.org/student/ on a smaller laptop and you’ll see that the left sidebar does not extend all the way down.

Thanks,
Lora

Hi Lora,

You have this css in simple css:

@media(min-width: 1680px) { 
nav .main-nav .mega-menu>ul>li:first-child { 
margin-left: calc((100vw - 1680px) / 2); 
} 
nav .main-nav .mega-menu>ul>li:last-child { 
margin-right: auto; 
}

Perhaps you forgot to add a closing bracket } at the end?

This makes it so all the CSS below that only execute for screen width above 1680px.

@leohsiang , this worked! Thank you and sorry for the late reply.