Vertical + horizontal Nav

Hi there,

you can enable the Secondary Navigation Module in Dashbboard > Appearance > GeneratePress.
Then in the Customizer > Layout > Secondary Navigation, you can set its Location to Left (or Right) Sidebar.

How would i do the following:

- reduce width of green bar
- green bar on top of blue bar
- green bar touches the top of the footer no matter how much content is on the page
- looks decent on mobile

Thanks!

Change the Customizer > General Structure to Flex Box.
For the Blue bar - you're using a Block Element change the Hook to: before_main_content

Ok, I figured out the margin issue related to the blue bar and was able to get the green bar on top. Thanks, David! :) Now, I need the following:

– reduce width of green bar
– green bar touches the top of the footer no matter how much content is on the page
– looks decent on mobile

Thanks again!

Hi Blake,

– reduce width of green bar

You should be able to adjust the width at customizer > layout > sidebars
https://docs.generatepress.com/article/sidebar-layout-overview/

– green bar touches the top of the footer no matter how much content is on the page

Try this CSS:

.inside-left-sidebar, .inside-left-sidebar >* {
    height: 100%;
}

looks decent on mobile

It depends on how you define decent :)

Thanks, Ying!

I'm using the slide-out menu on mobile. Is it possible to get all links in that menu while removing the blocks on mobile?

Also, I have two follow-up questions listed below.

- Is there a way to make the green bar content sticky?
- Do you know why the button on the 404 page is not showing now?

Thanks!

For the mobile, do you mean hide the green and blue block?
If so, they can be hidden by CSS on mobile.

– Is there a way to make the green bar content sticky?

Yes. Try this CSS:

#left-sidebar .inside-left-sidebar > .gb-container {
    position: fixed;
    width: 20%;
}

– Do you know why the button on the 404 page is not showing now?

Can you go to customizer > general, check if theIcon Type is set to SVG? If not, can you switch it to SVG?

Let me know if this helps :)

Thanks, Ying! :)

"For the mobile, do you mean hide the green and blue block?
If so, they can be hidden by CSS on mobile."

Yes, it might look better if I hide the green and blue blocks and add the additional links to the slide-out menu on mobile. Is the CSS something you can share with me?

Thanks again!

You are welcome :)

Give this CSS a try:

@media (max-width: 768px) {
    .gb-container.gb-container-5046dbf5, #left-sidebar {
        display: none;
    }
}

That worked. :)

I just noticed the left sidebar content when resizing from desktop to tablet. Is there a way to prevent the line breaking?

Thanks again!

Is your mobile break point set to 1024px?

If so, the media query in the CSS should match your break point.

Change the 768px to 1024px.

Let me know if this works :)

By the way, you might also want to add this CSS for the content area :)

@media (max-width: 1024px) {
    .site-content .content-area {
        width: 100%;
    }
}

hmmm... It looks like the sidebar resizes and causes the line breaks.

Sidebar width is based on percentage, it's currently set to 20%.

So yes, when screen shrinks, the sidebar will become narrower, so will the content area.

Would you like to make the sidebar a fixed width?