Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

How would I go about adjusting navbar-brand img to align with menu items

So I have decided to use bootstrap the first time for my navigation bar and am struggling to get the navbar-brand image element to align with the nav bar list items at the moment on laptop view. I have played around with the anchor element class navbar-brand however this created more white space between them when adjusting the margin and padding.

So I then adjusted the ul with class navbar-right to a margin of -52px. Which made the navbar-brand img and ul level.

However as this is only in laptop mode, I am going to have to adjust it for each breakpoint that I have. Is there a way to simply align the two items? I did try vertical-align: middle; however nothing happened.

my html is;

<div class="navbar navbar-default">

    <div class="container">

        <div class="navbar-header">

            <a href="{{ path_for('home') }}" {% if active_page == 'home' %}class="navbar-brand active"{% endif %}>
                <img src="../../img/decorum.jpg" alt="Decorum Home Image" />
            </a>


            <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-collapse">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </div>

        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav navbar-right">

                <li{% if active_page == 'portfolio' %} class="active"{% endif %}><a href="{{ path_for('portfolio') }}">Portfolio</a></li>

                <li{% if active_page == 'what' %} class="active"{% endif %}><a href="{{ path_for('what') }}">What We Do</a></li>

                <li{% if active_page == 'about' %} class="active"{% endif %}><a href="{{ path_for('about') }}">About Us</a></li>

                <li{% if active_page == 'contact' %} class="active"{% endif %}><a href="{{ path_for('contact') }}">Contact Us</a></li>

            </ul>

        </div>

    </div>

</div>

my css is here although it maybe difficult to read.

1 Answer

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

One of the easiest ways to adjust this if im getting exactly what you mean is to adjust the padding on the links.

It is usually "navbar-nav>li>a" that has the padding I think, if you adjust the top and bottom padding to suit the total size of your image that should do the trick.

Hope this helps Craig

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi Craig,

Thanks for the reply. I did read about the method you suggested. But when I kept trying it out the image would always need different margins padding etc in different views.

So I found another bootstrap class img-responsive as the height of the navbar is ~50px I set the width: auto and the height: 100%, I did also play around with margin of the li for the navbar-right class and it works perfectly!

Craig Watson
Craig Watson
27,930 Points

Hi Mayur,

Glad to here you have got it sorted, I do uses the img-responsive class in the navbar to as it is needed to serve hi res images for retina displays so you have done the right thing. As for having to fiddle with margins and padding at different sizes I never worry about things like this, just shows attention to detail as far as I'm concerned, on more css rule to stop something look rough is worth it!

Craig