Center navigation 1000x

  • Resolved havaz

    (@havaz)


    9 years, 5 months ago

    Hello everyone,

    do you know the feeling, when sitting in front of code and not seeing the mistake? Tried to center navigation for hours now, even read 10 sites of support in our forum, but was unable to center menu so far. Maybe I’ve been sitting in front of the computer too long :-/

    Here is my code:

    nav{
    margin-top: 4px;
    padding-right: 0 !important;
    text-align: right;
    }
    nav ul,
    nav li{
    list-style: none;
    }
    header .navigation ul{
    margin-bottom: 0;
    }

    .nav-item{
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    display: inline-block;
    text-align: center;
    margin: 0 35px;
    }

    Can someone help me centering the navigation?

    Best regards,
    Jonas

Viewing 8 replies - 1 through 8 (of 8 total)
  • Vamsi

    (@mannemvamsi)

    It will be easy if you provide a fiddle or your website like. [Link moderated and replaced with the below content]

    1. HTML for horizontal navigation bar

    <div class="header-navigation">
    <div class="navigation">
        <span class="nav-item v-center"><a href="/one">Featured</a></span>
         <span class="nav-item v-center"><a href="/two">News</a></span>
         <span class="nav-item v-center"><a href="/three">Sports</a></span>
         <span class="nav-item v-center"><a href="/for">Music</a></span>
         <span class="nav-item v-center"><a href="/five">Entertainment</a></span>
    </div>
</div>

    2. CSS for the twitter style navigation bar

    .header-navigation {

    background-color:#fff;
    font-family:'Arial';
    border:1px solid #e1e8ed;
    border-bottom:1px solid #e1e8ed;
}

.navigation {
    width:900px;
    margin-left:auto;
    margin-right:auto;
    font-size:20px;
    height:60px;
}
.navigation .nav-item {
    float:left;
}

.navigation .nav-item a {
    padding:20px 40px 19px 40px;
    text-decoration:none;
    color:#55acee;
    border-right:1px solid #e1e8ed;
    transition: box-shadow 100ms ease;
 }
.navigation .nav-item:last-child a{
    border-right:none;
}
.navigation .nav-item a:hover {
   box-shadow: 0 -15px 0 -10px #55acee inset;
 }
.v-center {
    text-align:center;
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}

    Thread Starter havaz

    (@havaz)

    https://www.halsmarthome.de is the website. Looking into your link right now.

    Cheers

    Vamsi

    (@mannemvamsi)

    Try changing your nav text-align 

    nav {
 text-align:left;
}
    Thread Starter havaz

    (@havaz)

    First of all, thank you ?? I knew it was something fundamental and I’m just awake for too long, but is it just me or is it still more on the right site of the page? space to the left is bigger, isn’t it?

    Vamsi

    (@mannemvamsi)

    Making #menu-base-navigation{ margin-left:-40px} feels like it is centered

    Thread Starter havaz

    (@havaz)

    I can find menu-base-navigation in the source code, but not in any css. Wrote it into stylesheet.css, but nothing changed. You’re right – it looks like it is 40-70px too far on the right.

    Thread Starter havaz

    (@havaz)

    Set margin-right properly. now everything looks fine. thank you so much. going to bed after two very long days without sleep. thank you!

    Thread Starter havaz

    (@havaz)

    ?? /resolved

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Center navigation 1000x’ is closed to new replies.