CODEWITHSUNDEEP
htmlcss
Nat B
Nat B

Reputation: 1

Centering navbar links and keeping vertically aligned with logo

I've tried a number of things within my CSS after reading some existing q&a's but nothing (yet) working.

Basically what I need is a navbar with links centered on the page and a logo floated to the right. I want them to be vertically aligned.

Managed to get them vertically aligned when the links are on the left but cannot get them to center! Have tried playing with margin: 0 auto; but to no avail.

Also, I'm sure my code may not be as efficient as possible so if anyone has any comments on that, they are very welcome.

here's the html:

    /* Add a black background color to the top navigation*/ 
    #stickyNav {
        background-color: black;
        overflow: hidden;
    }

    /* Style the links inside the navigation bar*/ 
    #stickyNav a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 20px 16px;
        text-decoration: none;
        font-size: 20px;
        vertical-align: middle;
    
    }

    /* Change the color of links on hover*/ 
    #stickyNav a:hover {
        color: #6400aa;
    }

    /*change color of links on click*/
    #stickyNav a:active {
      color: #e60050;
  
    }

    #Logo {
      display: inline-block;
      float: right;
      margin:0;
      padding:0;
      border:0;
    
    }
    <header>
    <nav id="stickyNav">
    <a href="index.html">home</a>
    <a href="about.html">about</a>
    <a href="services.html">services</a>
    <a href="catalogue.html">catalogue</a>
    <a href="blog.html">blog</a>
    <a href="contact.html">contact</a>


    <div id="Logo"><img id="Logo" src="Images/Logo.png" alt="Logo"     style="max-width:25%;height:auto;"></div>
    </nav>
    </header>

Upvotes: 0

Views: 37

Answers (3)

ThS
ThS

Reputation: 4773

I suggest you use display: flex; its now supported by all the modern browsers.

In your CSS add the following:

#stickyNav {
     display: flex; // #stickyNav now becomes a flex container
     background-color: black;
     overflow: hidden;
}


#stickyNav a:first-child, #stickyNav #Logo {
    margin-left: auto; // this does the trick
}

PS: display: flex; is not supported by the dinosaur Internet Explorer and for a wider support, add the vendor-prefixes for the ancient versions for Chrome, FireFox, Opera...

Hope I was able to put you further.

Upvotes: 0

Alex Ches
Alex Ches

Reputation: 36

There is two ways:

  1. You can make container for a-elements and apply to it margin: 0 auto
  2. Apply display:flex, justify-content:center for stickyNav and position: absolute, right:0 for logo

Upvotes: 0

Ingo86
Ingo86

Reputation: 86

Set the <a> tags to display:inline; and add the text-align:center; padding:20px 0; to #stickyNav.

Upvotes: 1

Related Questions