0
Welcome Guest! Login
0 items Join Now

Gantry 5: What is the best way to make a side nav bar?

Last Post
Search Topic
    • shenk's Avatar
    • shenk
    • Hero Rocketeer
    • Posts: 424
    • Thanks: 11

    Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 9 months ago
    • Normally the page layout is like this:
      This image is hidden for guests.
      Please log in or register to see it.


      I want to build a vertical nav bar like this page: joelcox.io/ , so the layouy would be something like this:
      This image is hidden for guests.
      Please log in or register to see it.


      I can think of some ways:
      1) use Gantry5's build-in sidebar, then everything else will have to be in the 'mainbody' section and I will not be able to use other sections

      2) CSS hard code a section to fixed position(width:400px;left:0;top:0) and make its height equal to window.innerHeight, then put the menu in it.

      Both ways feel awkward and the 2nd one seems to be provoking potential problems, so what is the best way to do this? Does gantry 5 allow us to have such a layout?
    #1220145
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 9 months ago
    • shenk wrote:
      Both ways feel awkward and the 2nd one seems to be provoking potential problems, so what is the best way to do this? Does gantry 5 allow us to have such a layout?

      Yes, my example uses:
      1) menu item set to Featured Articles
      2) created two modules in Joomla Module Manager for the sidebar
      3) created an Outline (duped from the Default outline) and assigned it to that menu item
      4) in that Outlines Layout Manager I clicke the LOAD icon and selected the Preset called "2_column-left"
      5) and got this result:

      This image is hidden for guests.
      Please log in or register to see it.
    #1220223
    • shenk's Avatar
    • shenk
    • Hero Rocketeer
    • Posts: 424
    • Thanks: 11

    Re: Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 9 months ago
    • This layout is different from what I want, there is still a top nav bar across whole screen width in it
    #1220249

  • Re: Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 8 months ago
    • I am looking at the same solution.
      already done setting sidebar on the left with fixed (seems no other choice). And i did add custom sidebar.yaml in the blueprints folder. it turn out very nice that i can change background color very easy, however once it saved, frontend didn't make any changes.
      My question is there other file that i need to modify? i did add image for the base background too. no change in frontend.
    #1221275
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 8 months ago
    • I've gone to our devs on this one.
    #1224374

  • Re: Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 8 months ago
    • can you please post a solution here?
      By the way do you see my image attachment above?
    #1224656
    • RacerFX's Avatar
    • RacerFX
    • Sr. Rocketeer
    • Posts: 175
    • Thanks: 13

    Re: Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 8 months ago
    • The key is with the use of containers on yaml files. I haven't gone beyond doing this for my main body, but I would assume it would work for the whole template.


       container:
    1:
      - main 80:
        - position-breadcrumbs
        - position-global_messages
        - pagecontent

      - sidebar1 20:
        - particle-social
        - position-sidebar
        - position-right

      http://docs.gantry.org/gantry5/advanced/creating-layout-presets
    • Last Edit: 9 years 8 months ago by RacerFX.
    #1225131
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 8 months ago
    • RacerFX wrote:
      The key is with the use of containers on yaml files. I haven't gone beyond doing this for my main body, but I would assume it would work for the whole template.


       container:
    1:
      - main 80:
        - position-breadcrumbs
        - position-global_messages
        - pagecontent

      - sidebar1 20:
        - particle-social
        - position-sidebar
        - position-right

      http://docs.gantry.org/gantry5/advanced/creating-layout-presets

      I've tried that already it looks great but you can't stack Sections. Just need a little more spare time.
    #1226127
    • RacerFX's Avatar
    • RacerFX
    • Sr. Rocketeer
    • Posts: 175
    • Thanks: 13

    Re: Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 8 months ago
    • Really, I would have thought hitting the + sign in the sidebar area would allow you to add sections where you could add a position(module, particle) for each row.
    • Last Edit: 9 years 8 months ago by RacerFX.
    #1226144
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Gantry 5: What is the best way to make a side nav bar?

    Posted 9 years 8 months ago
    • RacerFX wrote:
      Really, I would have thought hitting the + sign in the sidebar area would allow you to add sections where you could add a position(module, particle) for each row.

      I'm getting closer. When I get something bang on I'll post it.
    #1226277

Time to create page: 0.073 seconds