Question

I a situation I run into often, but my homebrew methods don’t stack up to a good solution.

What I’d like to do is to have a menu beside a logo, while being responsive.

It looks like so

=======
 logo =
      ==============Menu=======================
===============================================

The way my html looks is like so

<div id="logo">
  <a href="#"><img src=""... /></a>
</div>
<div id="menu">
  <ul>...
  </ul>
</div>

Now I want to position the menu at the bottom of the logo, but I have no idea how to do it. I can use margins, but than, once the responsiveness kicks in on mobile browsers and then the menu goes under the logo, there will be a large margin there too.

How would I deal with this?

Answer 1

Try to use responsive-design framework such as zurb-foundation it will offer you this requirement easily. Look at this example on its official documentation about Top Bar