Archived topic

Sidebar navigation height to match primary content

3 replies · Started by James on March 6, 2019

Viewing posts 1–4 of 4

March 6, 2019 at 4:17 pm #831086

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

March 6, 2019 at 5:25 pm #831149

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 :)

March 6, 2019 at 5:31 pm #831154

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

March 7, 2019 at 6:44 am #831654

Awesome! No problem :)

This archived topic is closed to new replies.

Start building better websites today.