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

Home Forums Support Fixed left vertical navigation layout – CSS and Customizer only

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #231546
    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:

    View post on imgur.com

    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%;
      }
    }
    
    #231841
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #232110
    James

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

    #232245
    Tom
    Lead Developer
    Lead Developer

    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/

    #232323
    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 πŸ™‚ )

    #232490
    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)

    #232516
    Tom
    Lead Developer
    Lead Developer

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

    #232551
    James

    Sure, I’ll PM you some login details.

    Thank you for helping btw!

    #232568
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #232569
    James

    Awesome! it worked perfectly!

    Thank you for the help!

    #232570
    Tom
    Lead Developer
    Lead Developer

    No problem! Thank you for laying the groundwork πŸ™‚

    #252971
    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.

    #252976
    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 {

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #253050
    Tom
    Lead Developer
    Lead Developer

    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%;
      }
    }
    #253286
    heliotrope

    Thanks a lot Tom,
    It works perfectly ! πŸ™‚

Viewing 15 posts - 1 through 15 (of 34 total)
  • You must be logged in to reply to this topic.