Timmy Turner Timmy Turner - 2 months ago 12
CSS Question

How to put div with menu next to the image

Okay, since what I've added was a mess, hopefully this time I did better job.
https://codepen.io/anon/pen/QKqpow

#myTopnav{
clear:right;
display: inline-block;
}


Can't do that because then my menu gets messy

This snippet shows what the current page look like but what I want to achieve is this(click) - basically I want to have menu at the bottom of header like shown on the image.

Answer

In the interest of maintaining as much of the code you have and trying to account for responsive changes, this is what I would do:

  1. Wrap the #myTopnav and .social elements in another div, give a class that makes sense. Here I've called it .nav-group.
  2. Give .icon a display value of inline-block, and set a relative width (20% is approximate to what you have here)
  3. Do the same for the new div (.nav-group in this case, with a width of 80%). Set its position to relative.
  4. Set .social and #myTopnav position to absolute, and align accordingly.

See here: https://codepen.io/danielbhansen/pen/wzAdPr

This solution assumes you want the height of the header to scale proportionally as the screen size changes, preserving the dimensions of the logo/icon/image on the left.

However, you are going to run into some issues with this design on smaller screens - you will see what I mean once you get to the breakpoint in your CSS. There are a lot of different ways to address the issue, depending on what you want to happen at that width and smaller.