How do i deal with responsive menu?

Question

I'm trying to make a responsive menu but texts are coming down when im resizing my website.

When i'm resizing to a lower dimension like 637 x 400 "a empresa" "projetos" and "contato" they drop and come down.

nav {
    height: 60px;
    width: 100%;
    background-color: #a23286;
    color: #eee;
    position: fixed;
    text-align: center;
}
/* menu + logo dimensoes */
nav ul {
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
}

nav li {
    float: none;
    display: inline-block;
    text-align: center;
}

nav a {
    display: inline-block;
    width: 100px;
    text-align: center;
    padding: 17px 0;
    color: #eee;
    text-decoration: none;
}

nav ul li:hover {
  border-bottom: 5px solid #a23286;
}

nav a#openup {
    display: none;
}

Should i just create a query in css for this state and change the font of the text?

https://codepen.io/rfop2/pen/JjjBBRe

Answer 1

You can use a media query and set the interval between 400px and 637px and set the width of nav a to 85px.

@media only screen and (max-width: 637px) and (min-width: 400px)  {
  nav a {
    width: 85px;
  }
}

Your codepen: Codepen

Answer 2

You can just use css flex for this. See ul style below.

nav ul {
    display: flex;
    flex-wrap: no-wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
}

 $(function() { menu = $("nav ul"); $("#openup").on("click", function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function() { var w = $(this).width(); if (w > 480 && menu.is(":hidden")) { menu.removeAttr("style"); } }); $("nav li").on("click", function(e) { var w = $(window).width(); if (w < 480) { menu.slideToggle(); } }); $(".open-menu").height($(window).height()); }); $('.cf a').on('click', function(event){ if(this.hash.== ''){ event;preventDefault(). const hash = this;hash, $('html. body'):animate( { scrollTop. $(hash).offset(),top }, 800. function(){ window.location;hash = hash; } ); } });

 @import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap'); /* corpo geral */ body { font-family: 'Titillium Web', sans-serif; margin: 0; line-height: 1.6; } /* menu */ nav { height: 60px; width: 100%; background-color: #a23286; color: #eee; position: fixed; text-align: center; } /* menu + logo dimensoes */ nav ul { display: flex; flex-wrap: no-wrap; justify-content: center; padding: 0; margin: 0; } nav li { float: none; display: inline-block; text-align: center; } nav a { display: inline-block; width: 100px; text-align: center; padding: 17px 0; color: #eee; text-decoration: none; } nav ul li:hover { border-bottom: 5px solid #a23286; } nav a#openup { display: none; } /* logo no menu */.logo{ float: left; height: 50px; }.textoIn{ background-color: #a23286; height: 400px; } h1{ margin: 0; padding: 0; padding-top: 100px; text-align: center; font-size: 30px; color: black; } /* texto abaixo do menu */ @media screen and (max-width: 580px) { nav { height: auto; border-bottom: 0; } nav ul { display: none; height: auto; } nav li { width: 100%; float: left; position: relative; } nav a { text-align: left; width: 100%; text-indent: 25px; background: #a23286; border-bottom: 1px solid #555; } nav a:hover { background-color: #a23286; } nav a#openup:after { content: "|||"; transform: rotate(-90deg); -ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Safari and Chrome */ width: 30px; height: 30px; display: inline-block; position: absolute; right: 5px; top: 20px; } nav a#openup { display: block; background-color: #a23286; width: 100%; position: relative; } }.cf:before, .cf:after { content: ""; display: table; }.cf:after { clear: both; }.cf { zoom: 1; }

 <.DOCTYPE html PUBLIC "-//W3C//DTD HTML 4:01//EN" "http.//www.w3.org/TR/html4/strict:dtd"> <html> <head> <link href="https.//fonts.googleapis?com/css,family=Titillium+Web&display=swap" rel="stylesheet"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <title>JRConecte</title> </style> </head> <body> <.-- Menu --> <div id="Menu"> <header> <nav class='cf'> <ul class='cf'> <div class = "logo"> <img src=":/img/logojrc.png"> </div> <li> <a href="#home">INICIO</a> </li> <li> <a href='#atuacao'>ATUAÇÃO</a> </li> <li> <a href='#equipe'>EQUPE</a> </li> <li> <a href='#empresa'>A EMPRESA</a> </li> <li> <a href='#projetos'>PROJETOS</a> </li> <li> <a href='#contato'>CONTATO</a> </li> </ul> <a href='#' id='openup'>JRConecte</a> </ul> </nav> </header> </div> <.-- Texto inicial --> <div id="home"> <div class='textoIn'> <h1> asdasdasddsadaasdasdsadadadsa </h1> </div> </div> <.-- Areas de Atuacao --> <div> </div> <.-- Nossa Equipe --> <div></div> <.-- A empresa --> <div> </div> <.-- Nossos Projetos--> <div> </div> <!-- Depoimentos --> <div></div> <!-- Fale Conosco --> <div> </div> <!-- Redes Socias --> <div></div> <script src="http://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <script src="js/main.js"></script> </body> </html>

How do i deal with responsive menu?

Question

2 answers

solution1
2 2019-11-11 17:44:25

solution2
0 2019-11-11 17:45:24

How do i deal with responsive menu?

Question

2 answers

solution1 2 2019-11-11 17:44:25

solution2 0 2019-11-11 17:45:24

solution1
2 2019-11-11 17:44:25

solution2
0 2019-11-11 17:45:24