How to center menu/navigation bar?

  • Tried a number of examples such as:

    .primary-menu {
width: 850px;
margin-left: auto;
margin-right: auto;
}

    But nothing seems to be having the effect I’m wanting, and it either does nothing, or spaces everything out that it starts to stack in multiple rows. Just trying to get it centered without spilling over.

    • This topic was modified 7 years, 7 months ago by bofslime.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello

    For this need to required customization in template file for update menu width and also change css for this.

    Perform below steps
    1. https://prntscr.com/gbwz96
    2. Add below css in Additional call

    ul.nav-menu {
  margin-bottom: 0;
  text-align: center;
  width: 100%;
}
ul.nav-menu li {
  display: inline-block;
  float: none;
  position: relative;
}

    You might be get height issue in menu, you need to handle this.

    Thank you

    Thread Starter bofslime

    (@bofslime)

    Looks like that did the trick, now looks perfectly centered. Thanks!

    This change caused my hover effect removal to give a slight unintended shift on mouse over for the top menu. I was using the following to keep the color change, but remove the effect:

    /*hover effect removal*/
.link-effect a span {
	transition: none !important;
}
    • This reply was modified 7 years, 7 months ago by bofslime.

    Hello

    Please check below option for remove effect and it solve your issue shift left
    https://prntscr.com/gd8fir

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to center menu/navigation bar?’ is closed to new replies.