Jump to content
Sign in to follow this  
Nic727

How to set Logo height in Nav bar? (Resolved)

Recommended Posts

Hi,

 

I have a little problem. I finished my logo and want to add it to my website right before my name in the nav bar, but if I had the image, it break my navigation.

1529269368-sketch.png

 

I'm not really sure how I can fixe that. I tried some stuffs here and there, but wasn't really successful. I would like to set a height to my image, but I don't want my image to mess up with the general height of the navigation.

<!-- NAVIGATION BAR -->
        <header class="navigation">
            <div class="nav-container">
                <a class="logo" href="nicolas-duclos.com"><img src="images/Logo-black.png"> NICOLAS DUCLOS</a>
                <!-- MOBILE MENU -->
                <a class="mobile-menu" href="#"><i class="fas fa-bars" aria-hidden="true"></i></a>
                <nav class="right-menu">
                    <a class="close-mobile-menu" href="#"><i class="fas fa-times"></i></a>
                    <ul class="menu">
                        <li class="menu-item"><a href="index.html">ACCUEIL</a></li>
                        <li class="menu-item"><a href="albums.html">ALBUMS</a></li>
                        <li class="menu-item"><a href="blogue.html">BLOGUE</a></li>
                        <li class="menu-item current"><a href="a-propos.html">À PROPOS</a></li>
                        <li class="menu-item"><a href="#">CONTACT</a></li>
                    </ul>
                </nav>
            </div>
        </header> 

My idea would be to use display flex to my nav-container and items-align:center, but it make my floating right "right-menu" going to the left next to my logo and name. My goal is to have logo+name on left and menu on the right. Do you have any idea how I can do that?

 

Thank you

Edited by Nic727

Share this post


Link to post
Share on other sites

Nevermind, saw that justify-content:space-between to nav-container and adding vertical-align:middle to my image fixe that. Not sure why vertical-align work here since my image is not in a table, but nice to see it works.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×