[Resolved] Fixed Vertical Navigation with Background Image

[Anne]

Hello All –

I am trying to build a left sticky vertical menu with a background image, similar to this Bridge Theme template:

http://demo.qodeinteractive.com/bridge9/

The content on the right scrolls while the left menu is sticky with no white space around any of the content.

I’m using GeneratePress Theme with the add-ons and Beaver Builder page builder. I’ve tried multiple scenarios…WP sidebar, BB sidebar, widgets, background image in widgets, building in BB, etc.

I’ve reviewed Tom’s replies in past posts about the Sticky-Menu plugin and the GitHub Sticky-kit. However before I jump in and make changes to PHP files, etc., I am looking for direction on what would be the best procedure. I have moderate CSS skills, not a total newbie. 🙂

I’d like to stay with GP and don’t want to switch themes.

Any thoughts would be appreciated as I’ve been banging my head on the desk for days. 🙂 Thanks.

[Tom]

Hi there,

Definitely kind of complicated, but it’s a layout I wouldn’t mind adding into the core theme.

Do you have something started? If so, can you show me? It’s easier for me to adjust what’s already done to help achieve something instead of start from scratch.

If you haven’t started, this might help: https://wordpress.org/support/topic/vertical-menuheader-wno-horizontal-header-menu-is-this-possible?replies=10

[Anne]

Thanks for the additional link. I missed that one on my many searches.

I’m working locally in WAMP, so nothing to show right now, but thanks for the offer!

That would be GREAT if you could get this integrated into the theme at some point. Will it be way into the future, or sooner, do you think? I’ll mark this topic as resolved, for now, but I’m still “on a mission” to build a site like this. 🙂

BTW, you have a great product and great support. Kudos to you! You must work 24/7. 😉

Thanks, again.

[Anne]

I like this vertical nav even better, and it might be easier for me to build:

http://demo.qodeinteractive.com/bridge31/

🙂

[Tom]

Looks nice! Thanks for the ideas 🙂

This feature won’t be for a while – something like this requires a lot of development + testing time before releasing it to the wild.

Definitely high on my list though.

[Neil]

I like this layout so was just playing around and working so far, is this the best approach?

Following Tom’s link above.
Hook logo in as described to left sidebar.
Set menu location to left sidebar.

Then some css, don’t think sticky menu plugin is needed if set height of sidebar to 100%

.one-container .inside-left-sidebar {
    background-color: #636363;
    height: 100%;
    margin-top: 0;
    position: fixed;
    width: 25%;}

Then can add background image etc with css.

Just a few thoughts… that only works with a page set to full width, how would I set all pages to be full width by default so the sidebar is always sitting on the left?

Pixel width better than percentage to accommodate smaller screen sizes else sidebar narrows. Sidebar needs to go when reaching mobile size and revert to the mobile menu, not got into that yet.

[Neil]

Anyone else playng with this who has Beaver Builder even easier than hooking in the logo and setting menu to sidebar as above is to build a BB row/layout template set as single column and add logo/image there followed by the menu module, social icons etc. Can format everything there and then hook the template into before header hook with the BB shortcode.

That works great.

[Tom]

Just a few thoughts… that only works with a page set to full width, how would I set all pages to be full width by default so the sidebar is always sitting on the left?

You could try this:

body .grid-container {
    margin-left: auto;
    max-width: 100%;
}

margin-left: auto will make it sit the left, so 100% width might not be necessary.

Would love to see what it looks like 🙂

[Neil]

That could work. Meanwhile I had another look at it and thought a little over complicated, so tried this.

Dropped the idea of using the sidebar on left for the menu etc and instead dropped the BB template into the header instead. Then with css positioned that to the left and full height.

Then I set site to be content/no sidebars, gave a left margin to push away the width of the vertical header.

So now all pages sit right and BB global settings can make that content full width in space to right of vertical header. Hid the footer and site info which can now sit in the bottom of the left header.

Then just had to hide that on smaller screens and let the mobile menu kick in.

Work in progress but pretty easy and not a lot of code. Working on localhost but may pop it up onto a testing server online if you wanted to look and see how it could be improved.

Same as the couple of examples above really so nothing dramatic.

[Tom]

I’d love to see it! Ultimately I’d like to do it without any other plugin (BB), but it would definitely be helpful to see how you achieved it 🙂

[Neil]

Thanks Tom, will upload and give link.

Without BB you could do as before within GP, logo and setting menu to header, if vertical can be set. Anything else could be added to the header widget area with a bit off css to make it all work I am sure.

[Neil]

Test site here http://gwwtest.com/gk/

Very rough as I am playing with a redesign for an existing client and only really just started but got sidetracked by this challenge!

[Tom]

Ah interesting technique. Instead of inserting the logo into the sidebar, you just place the header element to the left.

Definitely gives me something to think about, thank you! 🙂

[Neil]

Thanks Tom, grateful for any way to improve that layout

[Author]

Posts