Full height side navigation OR vertical header

[Dee Broughton]

I am trying to switch this site to GeneratePress because the current theme is no longer supported and rather buggy. http://jdmathes.com/

I have experimented quite a bit but have not been able to accomplish a responsive side header/menu of this type.

From this, and another theme I’ve used to duplicate the branding http://jdmathes.photo/
it seems like the best way would be to wrap the navigation and footer in the header, but what do I know?

I tried a number of things including putting the logo in a menu item and trying to make a longer than needed navigation, but that was problematic in a number of ways.

Is there anyway to easily accomplish this with GP?

[Tom]

Hmm, whatever you do will have to be pretty custom..

Here’s an example of someone doing something similar: https://wordpress.org/support/topic/left-sidebar-in-responsive-view-comes-last?replies=5

Then you can use a plugin like this to make the sidebar stick: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Hope this helps 🙂

[Dee Broughton]

That’s brilliant! I don’t actually know what to do with that code, though. Give me a hint. and I’ll research the rest. 🙂

[Tom]

Adding the script to the wp_footer hook will do the trick 🙂

[Dee Broughton]

Hm, still working on figuring this out. At this point, when I put the code in wp-footer, I don’t see any change.

[Tom]

What it should do is when you hit mobile size, it will move the left sidebar up above the content, so it acts as a header.

It basically allows you to use the left sidebar as an area with your header etc.. and then still have the header on top on mobile.

[Dee Broughton]

I can see from the code what it’s supposed to do, but I may have other modifications interfering. I’ll work on it some more. In the meantime, if anyone has suggestions… I am still looking for a way to create a full height header that wraps around the main navigation and footer, that looks like this jdmathes.com when in desktop view. That site has no responsive view for mobile which is just one of the many reason I want to duplicate the look but move it to generatepress.

[Patrick Steil]

For what it’s worth I would also like to see support for a vertical header added to GeneratePress. Any chance that could be added?

I am a new user to GeneratePress and am thinking this will be a theme we use to build many websites and would like this type of flexibility. I look at GeneratePress as a way to generate custom themes without the coding. Is that your goal as well?

[Tom]

Hi Patrick,

This is still planned for GP, just haven’t found the best way to go about it yet.

That’s the goal – fully customizable to decrease coding while trying to stay as lightweight and streamlined as possible 🙂

[Helen]

Wow! I have been looking all over for a solution to this issue. I thought GP should have thought of this idea. Sure hope you keep working on it. I want to create a site that has a full-height left sidebar that includes the Header, Primary (only) navigation, and contact info. I have seen sites like this, and can read the “view page source”, but don’t know enough to apply that to the site I want to create in GP-Premium.

[Helen]

Oh. In case you want to see the site I’ve been looking at its: Millworkdesignstudio.com
Not a perfect site by any means, but it has the feature I want, including the carousel slider at the top of the main body.

[Tom]

This actually isn’t very hard – there’s a great topic on it here: https://generatepress.com/forums/topic/fixed-left-vertical-navigation-layout-css-and-customizer-only/

[Helen]

Thank You,
Great, I think, but where exactly do I put the CSS you sent. Thanks in advance.

[Tom]

This should help: https://generatepress.com/knowledgebase/adding-css/

[Author]

Posts