[Resolved] Fixed left vertical navigation layout – CSS and Customizer only

[James]

Hey Everyone,

I wanted to make a vertical navigation layout that is “responsive” and uses only CSS and the customizer. I managed to get it working, and here is a screenshot for reference:

http://i.imgur.com/NopfxUF.jpg

I posted on facebook and the GP page admin suggested I post the code here so it can be improved upon.
One thing I would like to do, is find a way to reference the logo that was uploaded via the GP customizer, rather than typing the direct URL.

The GP Custmoizer settings set to left sidebar and the settings for the width % match with the css amount.
Please let me know what you think

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

  #primary-menu.main-nav {
    width: 20%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 1;
    padding-top: 175px;
    background-color: #1a2930;
    background-image: url("http://bluepointdigital.com/sites/create/elle/wp-content/uploads/sites/3/2016/09/1442274824.png");
    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%;
  }
}

[Tom]

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 🙂

[James]

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

[Tom]

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/

[dasigna]

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

[James]

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)

[Tom]

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

[James]

Sure, I’ll PM you some login details.

Thank you for helping btw!

[Tom]

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 🙂

[James]

Awesome! it worked perfectly!

Thank you for the help!

[Tom]

No problem! Thank you for laying the groundwork 🙂

[heliotrope]

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.

[Jamal]

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 {

[Tom]

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%;
  }
}

[heliotrope]

Thanks a lot Tom,
It works perfectly ! 🙂

[Author]

Posts