Center align horizontal navigation

Trevor

#222073

I think this simple CSS should do it:

#search-filter-form-587 {
  display: table;
  margin: 0 auto;
}

Anonymous

#222127

Yeah that worked centering the navigation! It didn’t help the responsiveness though! :'( I would like all the elements to align nicely underneath each other with full with, if you know what I mean? 🙂

Anonymous

#222129

And thanks btw! 😉

Trevor

#222147

Responsiveness is handled with CSS media queries.

Do you have a breakpoint for mobile? Let’s say mobile is 600px and less, and desktop is 601px and more, then the code I gave you would become:

@media only screen and (min-width: 601px) {
  #search-filter-form-587 {
    display: table;
    margin: 0 auto;
  }
}

Similarly, inside that you could put the code you already used to make the form horizontal.

Then, by default, on mobile the form would become vertical and not centered.

[Author]

Posts