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 Alex Oates
Alex Oates
7,171 Points

How can I position two inline SVGs next to each other?

This is for mobile design.

I'm trying to get my inline SVG logo and drop down nav icon next to each other in the header.

My inline SVG logo is positioned central of the viewport, however when I drop my menu SVG code in the html, it pushes the logo SVG to the right, out of position.

Also, when I add the menu SVG my first list item in the vertical nav is pushed left slightly also.

I have the menu icon SVG in a div with the class "handle" just before my list items.

Here is the CSS currently used for the inline logo:

.logo {
        width: 100%;
        height: 35px;
        display: inline-block;
        padding: 0;
        fill: #ffa500;

    }

CSS for the inline menu icon:

.menu {

        width: 100%;
        height: 50px;
        padding: 0;
        margin: 0;
    }
Justin Iezzi
Justin Iezzi
18,199 Points

Hi Nicole, I fixed your markdown formatting so that your code snippets display properly. Check out the "Markdown Cheatsheet" link on this page for more info on how to display code. Regarding your issue, you may want to post a link to a workspace snapshot so that we can get a better look at what's going on.

1 Answer

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

use the float: left; on the logo and float : right; on the menu

i hope this fixes your problem