Using Perch's dynamic navigation with branding centralised between the list items?

  • My navigation markup looks as follows: As you can see I have my branding in between the nav list items.. Is there anyway I can use perch's dynamic navigation where it builds from pages created but keep my <li id="nav-brand"> in between the nav list?

  • drewm

    Approved the thread.
  • Maybe create 2 navigation groups (left and right). Add the pages you want in the left to the left nav group and do the same for the right. Then render the left nav , logo, right nav.

    you would have to specify explicitly which pages go in which nav groups though. Not sure if that’s ok with you.

    Does that accomplish what you’re looking for? Maybe I’ve misunderstood your need.... mayb 1 too many 🍺‘S tonight too 😂

  • Personally I would use flex box to do this along with Jordan's suggestion above. Then the logo element can be outside your list markup. You can use order to change the order of the items in the flex container. The advantage of this is that you can change the order for mobile view.

    Rough example below: