centering main navigation

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

  • I don’t know if it’s the cleanest fix, or best practice, but this seemed to work for me. You may have to adjust it slightly based on your font, logo positioning, etc. My logo is centered, which is why I padded the top of my navigation. The other thing to keep in mind is how things react to different device sizes. This fix ensures everything stays responsive, but it’s a bit clunky. If anyone has any suggestions for a smoother fix, I’d love to try them.

    /* CENTERING THE NAVIGATION STARTS HERE */
    .main-navigation {
    float: none;
    padding-top: 25px;
    margin-left: 21%;
    margin-right: 20%;
    min-width: 70%;
    }

    .main-navigation li {
    padding: 0px 50px 0px 0px;
    text-align: center;
    }

    /* CENTERING THE NAVIGATION ENDS HERE */

    syzygist

    (@syzygist)

    Thank you for this – I was trying to do the same thing, and it worked great for me.

    Thank this work for me ??
    mine is this

    /* CENTERING THE NAVIGATION STARTS HERE */
.main-navigation {
float: none;
padding-top: 25px;
margin-left: 21%;
margin-right: 20%;
min-width: 70%;
}

.main-navigation li {
padding: 0px 90px 0px 0px;
text-align: center;
}

/* CENTERING THE NAVIGATION ENDS HERE */
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘centering main navigation’ is closed to new replies.