How to make a simple and responsive horizontal menu?

Question

How to make a simple and responsive horizontal menu?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Hello.

I started studying front-end development recently (practically yesterday) and am having some issues with CSS. I am horrible with the positioning of things, and what makes me furious is that I can do some gambiarras to leave the elements / items well positioned on the full screen, but when I decrease it, the items start to leave the place, the boxes, the headers etc. It is all extremely shabby.

Below is my code and how the menu went.

obs: the "menu" class is inside the "containertopo" class.

*
{
 margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
}

.containertopo
{
    position: relative;
    width: 100%;
    height: 79px;
    background-color:deepskyblue;
    opacity: 0.5;

}

.containertopo img
{
width: 99px;
float: left;
margin-left: 17%;
}


.menu
{

display: inline-block;
}

.menu ul
{
    margin-left:4em;
}

.menu ul li
{

    display: inline-block;
    margin: 2em;
}

html5 css3 front-end

asked by anonymous 28.05.2016 / 09:20

2 answers

Is there any way to know if someone is referencing some file on my site in another? Elements of B whose indices are the positions of occurrences of equal elements in A

score 1 · Answer 1

Although I did not post your HTML and did not know what it was that I noticed the problem, I believe you can adjust this to your case:

The trick in this case is to play the length relative to the parent element, by ex <li> in relation to <ul> and <ul> in relation to <nav> etc .. and put it in%, and also play with max-with

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

nav {
  background-color: coral;
  width: 100%;
}
ul {
  width:100%;
  max-width: 800px;
  margin: 0 auto;
  text-align:center;
  padding:0;
  font-size:0;
}
img {
  width:60px;
}
li {
  width: 20%;
  display: inline-block;
  font-size:16px;
  border: 1px solid;
  vertical-align:middle;
}

<nav>
  <ul>
  <li>
    <img src="https://i.ytimg.com/vi/bEFyV2JCjOM/hqdefault.jpg?custom=true&w=120&h=90&jpg444=true&jpgq=90&sp=68&sigh=q79Y1ZfIk-fsdzV2xpFk6xbvbTc"></li><li>olá</li><li>hey</li><li>hello</li><li>hola</li></ul></nav>

Notethatwith media queries you could actually display a menu button if the window was less than X px, or the logo disappears, etc ...

PS: font-size: 0 is to remove the margin with which child elements with display:inline-block remain. I never quite understood why the margin happened. And box-sizing: border-box; is for the border to stay inside the element and not out, it's just for the example.

score 0 · Answer 2

Take a look at this simple example: link

What I advise you is:

Do not use px (pixels), use percentages to give size. For texts, use EM 's.
Learn how to use display:flex in your container (this will make all elements within this container magically align).
>
You are saying the following: When it decreases to less than 399, instead of my menu being in a row, it will be in a column !!! Everything inside this DIV container will behave like this !!!

Here's another example: link

I hope I have helped