[Resolved] Sidebar navigation height to match primary content

[James]

Hello,
I have a searched around on the forum but have not fully achieved what I am looking for.

Setup:
Primary Nav location set to left sidebar
No other navigation being used.

Desired Outcome:
Left sidebar height = primary content height.

I have tried the following CSS:
.site-content {
display: flex;
}

Then setting a specific background color which appears to work as expected on desktop however in tablet/mobile the layout shows sidebar div to the right of the content and full height. I would like the sidebar not to be shown on mobile and the primary nav to display as usual as a drop down from the top.

Hopefully that makes sense.

Thanks for any help

[Tom]

Hi there,

Try this instead:

@media (min-width: 769px) {
    .site-content {
        display: flex;
    }
}

Then to hide the sidebar on mobile, try this:

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
}

Let me know 🙂

[James]

Thanks Tom,
I literally just came up with the same solution. I appreciate the support as always

[Tom]

Awesome! No problem 🙂

[Author]

Posts