-1

I have used text-align: center inside, but .main-nav was not effected. What is the best way to center this navigation?

 /***** Navigation *****/

    .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
    .main-nav li { float: left;  position: relative; }
    .main-nav li a { display: block; color: #333131; font-size: 16px; font-size: 1rem; line-height: 1; letter-spacing: 2.7px; padding: 12px 0; margin-right: 30px; }
    .main-nav li a:hover { color: #000; }
    .main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
    .main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
    .main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
    .main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
    .main-nav ul ul { display: none; position: absolute; left: -20px; }
    .main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
    .main-nav ul ul ul { left: 100%; top: 0; }
Code_Ninja
  • 1,729
  • 1
  • 14
  • 38
vjld11
  • 1

1 Answers1

-1

Your nav container should have below property to make it center: I have not tested. if you want exact solution create fiddler or share HTML code as well.

.navContainer{
 width:100px;  <!-- This value can be any -->
 margin: 10px auto;  <!-- first value of margin can be any -->
}
Sandeep Saroha
  • 62
  • 1
  • 10
  • Now would you care to explain why `margin:10px auto`, why it cant be `margin:0 auto`? – Code_Ninja Jun 14 '18 at 10:16
  • @Code_Ninja, I forgot to put comment for that value...it's understood that value could be any. I also mention that we need HTML to give exact solution. – Sandeep Saroha Jun 14 '18 at 10:24
  • And have you tested your answer because doesnt look like a tested one, as there is no HTML, and most of the time our CSS and jQuery totally depend on the DOM structure. – Code_Ninja Jun 14 '18 at 10:31