How to center menu/navigation bar?

  • bofslime

    (@bofslime)


    8 years, 10 months ago

    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 8 years, 10 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)
  • Romik84

    (@romik84)

    8 years, 10 months ago

    Hello

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

    Perform below steps
    1. http://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)

    8 years, 10 months ago

    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 8 years, 10 months ago by bofslime.
    Romik84

    (@romik84)

    8 years, 10 months ago

    Hello

    Please check below option for remove effect and it solve your issue shift left
    http://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.