Split main navigation

Excursionist
15 2 1

I'm building out a theme for a client and using the Debut theme. I need to center the logo in the middle of the main navigation -> menu-item menu-item logo menu-item menu-item.

 

I've been searching but have been unable to find a solution. 

 

Thanks in advance

0 Likes
Shopify Partner
6 1 1

Hey Kemmieg,

 

I think a good idea would be to manage client expectations and suggest the logo and nav remain separate while still being centred if they want. (I'd actually deter them from this as there is good data that logo in the top left is the best for the user anyway but I digress). An example of what you could offer is:

 

Screen Shot 2019-09-25 at 18.14.17.png

 

If you have no choice then I would either look for a theme that supports this (lots of themes are similar to Debut visuallly) or the best option really is just to completely rebuild the nav. 

 

I am guessing the result you are after is something like this:

 

Screen Shot 2019-09-25 at 18.05.49.png

Floating the first two list items to the left is easy enough (you will want an even number of li's) then to center the logo I'd prob use flexbox, maybe something like:

 

.logo-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

Let me know how you get on, happy coding! </>

Sam Cooper - Cooper & Co

0 Likes
Excursionist
15 2 1

Hmmm. Let me see if I can get this to work. Liquid is new to me and I'm having issues on any documentation or examples of building out the navigation.

 

Thank you

 

0 Likes