Fixed left vertical navigation layout - CSS and Customizer only

Awesome, work - thank you for sharing!

Using the latest GP Premium (1.2.90), try setting the Navigation Logo in "Customize > Layout > Primary Navigation".

That should insert it above the navigation if it's set to the left sidebar there so referencing it as a background image shouldn't be necessary.

Let me know :)

It didnt seem to work, but i'll keep looking into it

Give something like this a shot:

add_action( 'generate_before_left_sidebar_content','tu_insert_sidebar_logo');
function tu_insert_sidebar_logo()
{
    if ( function_exists( 'generate_construct_logo' ) ) generate_construct_logo();
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

WOW... THAT looks interesting (and promising as well).

think i'll have to give that a try and see how it works on screens! but there are already some questions coming to mind... :-). could be very useful for something i have in mind, have to try out if this would be the thing.

btw: whats the state of affairs on your own solution for that, regarding options or a child theme?
same direction or completely different... and: any timeline? (sorry for asking again :-) )

Hey Tom, I added in using the pluginception editor. I still didn't see the function work...

Maybe this could be the reason:
In my CSS I am expanding the main nav bar and giving it a background color. I am not expanding the sidebar. Perhaps the menu is covering the elements the code you are giving me is displaying?

Also, @dasigna, I am hoping to make a child theme once I get everything working properly. I would like to keep it as a design option for future websites that I will be making. I can share it here in case anyone else would like to use it. (Unless it can be included as an option for the official GP)

Do you have a server you're doing this on that I could see possibly?

Sure, I'll PM you some login details.

Thank you for helping btw!

Figured it out.

So here's the steps:

1. Upload your navigation logo into "Customize > Layout > Primary Navigation".
2. Set your sidebar to "Left Sidebar" in "Customize > Layout > Primary Navigation".
3. Add this CSS:

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

  .gen-sidebar-nav {
    width: 20%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 1;
    background-color: #1a2930;
    background-repeat: no-repeat;
    background-position: top center;
    border-style: hidden;
    border-top-width: 65px;
    border-top-style: solid;
    border-top-color: #1a2930;

  }

  .footer-widgets {
    padding-left: 20%;
  }

  .site-info {
    padding-left: 20%;
  }
}

That should be it - no need for custom functions or anything.

Let me know :)

Awesome! it worked perfectly!

Thank you for the help!

No problem! Thank you for laying the groundwork :)

Hello,
That's great ! Exactly what i was looking for !
How can i add Lightweight social icons in the bottom of this left sidebar ? (after the menu)
I tried with widget tool but nothing appears.
Thanks in advance.

Hi

Please give this a try. Did you add the css at step 3 here https://generatepress.com/forums/topic/fixed-left-vertical-navigation-layout-css-and-customizer-only/#post-232568 ?

If so try to reduce the height of .gen-sidebar-nav {

If you want to use widgets with it, then this CSS might work better:

@media (min-width: 769px) {
  .site-header {
    display: none;
  }
    
  .sidebar {
    height: 100%;
    background-color: #1a2930;
    width: 20%;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 1;
  }
  .footer-widgets {
    padding-left: 20%;
  }

  .site-info {
    padding-left: 20%;
  }
}

Thanks a lot Tom,
It works perfectly ! :)