Archived topic

Centre Navigation and Logo Like GP Site

5 replies · Started by EcoDev on February 3, 2021

Viewing posts 1–6 of 6

February 3, 2021 at 3:48 am #1644024

Hello,

I would like my logo and navigation to behave like the GP site where at a certain browser size the navigation centres below a centred logo. I thought this would be set with Navigation Drop Down but it doesn't seem to work for me. I'm using Flexbox structure and navigation as header.

Thanks

February 3, 2021 at 4:48 am #1644097

Hi there,

you would need to disable the Navigation as Header option for the Navigation Drop Down to work.
Or with the nav as header you can try this CSS:

@media(max-width: 1024px) and (min-width: 769px) {
  .navigation-branding {
    flex: 1 0 100%;
  }
  #primary-menu {
    margin-right: auto; /* optional - push nav left */
  }
}

Adjust the max-width: 1024px for where you want it to kick in.

February 3, 2021 at 7:34 am #1644365

Thanks David. Is there any way of getting everything centred too (including the search icon)?

Thanks

February 3, 2021 at 10:34 am #1644555

Hi Joel,

You could use this CSS:

.menu-bar-items {
    margin-right: auto;
}

Instead of:

#primary-menu {
    margin-right: auto; /* optional - push nav left */
  }

Let me know :)

February 3, 2021 at 11:09 am #1644619

Thanks Ying, it's ok I've gone with David's original suggestion of disabling navigation as header.

Thanks

February 3, 2021 at 11:15 am #1644634

No problem :)

This archived topic is closed to new replies.

Start building better websites today.