CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
avasssso
avasssso

Reputation: 257

trying to align nav links with logo in bootstrap 4

I am having issues with aligning my navigation links with my logo. Currently, my logo is in the center of my navigation and the links for some reason are displaying above my logo rather than next to it. the image below shows my issueenter image description here

I am trying to get it to look like this:

enter image description here

here is my header code:

  <header id="header" role="banner">
            <div class="header-inner">
                <nav class="navbar">
                    <div class="container text-xs-center">
                        <div class="navbar-nav">
                            <a href='{{ url("/") }}' class="nav-item-link nav-item nav-link">Home</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Our Team</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Media</a>
                            <a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a>
                            <a href="#" class="nav-item-link nav-item nav-link">About Us</a>
                            <a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link">Contact Us</a>
                            <a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate">Support Us</a>
                        </div>
                    </div>
                </nav>
            </div>
        </header>

and my css:

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    padding:20px;
}

a.nav-item:hover{
    color:#000;
}

a.nav-item:hover{
    color:#000;
}

.navbar-nav{
    display:inline-block;
}

#donate{
    background-color: #7ED321;
    border-radius: 8px;
    padding: 15px;
}

#header{
    width:100%;
}

.header-inner{
    padding: 18px 0;
    width:100%;
}

any help would be appreciated!

Upvotes: 0

Views: 363

Answers (1)

user2684452
user2684452

Reputation: 731

try to do 

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    padding:20px;
    vertical-align:center;
}

If that doesn't work, then try adding line-height property to get it to the desired vertical position.

Upvotes: 1

Related Questions