Problemas ao deixar o menu 100% na tela

Bruna Garcia · Julho 12, 2017

Quero deixar o menu 100% na tela, mas parece que tem algo travando do lado direito...

Meu código:

<!DOCTYPE html>
<html>
   <head>
       <title>Perimos Barbershop</title>
       <meta charset ="UTF-8" />
       <link rel="stylesheet" href="..\css\estilo.css" />
   </head>
<body>
<div id="menu">
   <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="sobre.html">Sobre</a></li>
       <li><a href="estrutura.html">Estrutura</a></li>
   </ul>
</div>
<div id="incone">
   <li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
</div>
<div id="menu">
   <ul>
       <li><a href="faleconosco.html">Fale Conosco</a></li>
       <li><a href="promocoes.html">Promoções</a></li>
       <li><a href="servicos.html">Serviços</a></li>
   </ul>
</div>
</body>
</html>

@charset UTF=8;

body{
   background: gray;
   margin: 0px;
   padding: 0px;
}

#menu{
width: 100%;
}

#menu ul{
margin: 0px;
padding: 0px;
}

#menu li{
display: inline;
list-style: none;
}

#menu a{
   float: left;
   font: 1.0em Verdana;
   background: white;
   color: black;
   text-align: center;
   text-decoration: none;
   padding: 30px;
}

#menu a:hover{
   padding: 30px;
   background: black;
   color: white;
   text-decoration: underline;
}

#incone img{
   max-width: 202px;
   max-height: 202px;
   width: auto;
   height: auto;
}

#incone li{
display: inline;
list-style: none;
}

#incone a{
float: left;
}

Omar~ · Julho 12, 2017

Mais ou menos isso?

Obs.: Não tratei de responsivo...

Spoiler


<!DOCTYPE html>
<html>
    <head>
        <title>Perimos Barbershop</title>
        <meta charset ="UTF-8" />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
                -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%
            }
            body {
                background: #999999;
                margin: 0px;
                padding: 0px
            }
            nav.menu {
                width: 100%;
                margin: 0 auto;
                text-align: center
            }
            nav.menu ul {
                list-style: none
            }
            nav.menu ul li {
                display: inline-block;
                position: relative;
                background-color: #ffffff;
                width: calc(14% + 5px);
                margin-left: -5px;
                padding: 30px
            }
            nav.menu ul li a {
                cursor: pointer;
                color: #000000;
                text-decoration: none;
                display: block

            }
            nav.menu ul li a.logo {
                width: 200px;
                /* height: */
            }
        </style>
    </head>
    <body>
        <nav class="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="sobre.html">Sobre</a></li>
                <li><a href="estrutura.html">Estrutura</a></li>

                <li><a class="logo" href="logo.html"><img src="imagens\logo.png"/></a></li>

                <li><a href="faleconosco.html">Fale Conosco</a></li>
                <li><a href="promocoes.html">Promoções</a></li>
                <li><a href="servicos.html">Serviços</a></li>
            </ul>
        </nav>
    </body>
</html>

Bruna Garcia · Julho 13, 2017

Olá, obrigada pela resposta!

Então, mas eu preciso que seja responsivo... colocando valores fixos nos width não vai ser responsivo certo?

Danilo CS · Julho 14, 2017

11 horas atrás, Bruna Garcia disse:

Olá, obrigada pela resposta!

Então, mas eu preciso que seja responsivo... colocando valores fixos nos width não vai ser responsivo certo?

Olá Bruna como vai?

A resposta à sua pergunta é sim e não!

O que você acha de usar o sistema do Boostrap? Ajuda bastante nessa parte...(e em todo o resto) hehehe

Tipo...o width vai ficar 100% na tela, mas para você faça funcionar direitinho em telas menores, você teria que usar um cód adicional.

Tipo isso:

@media (min-width: 168px) and (max-width: 240px) {

}

Já ouviu falar dessa propriedade?

Particularmente eu nunca tive paciência de montar menu por causa dessas coisinhas...

Dá uma olhada nesse exemplo aqui:

https://v4-alpha.getbootstrap.com/examples/starter-template/

É uma roda na mão....digo...mão na roda ;)

Ana Gauna · Julho 16, 2017

Em 13/07/2017 at 14:20, Bruna Garcia disse:

Olá, obrigada pela resposta!

Então, mas eu preciso que seja responsivo... colocando valores fixos nos width não vai ser responsivo certo?

<!DOCTYPE html>
<html>
    <head>
        <title>Perimos Barbershop</title>
        <meta charset ="UTF-8" />
        <link rel="stylesheet" href="..\css\estilo.css" />
	    <style>
              @charset UTF=8;
              body{background: gray; margin: 0px; padding: 0px;}
              #menu{width: 50%; }
              #menu ul{margin: 0px; padding: 0px;}
              #menu li{display: inline; list-style: none;}
              #menu a{ float: left; font: 1.0em Verdana; background: white; color: black;  <!--  cor fixa do menu -->
                       text-align: center; text-decoration: none;  padding: 5px; }
              #menu a:hover{ padding: 5px; background: silver; color: darkred; text-decoration: none; <!-- underline --> } <!-- variação de cor do menu passando o mouse  -->
              #incone img{ max-width: 200px; max-height: 200px; width: auto; height: auto; }
              #incone li{display: inline; list-style: none; }
              #incone a{ float: left; }
	     </style>	
    </head>
    <body>
         <div id="incone">
              <li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
         </div>
         <div id="menu">
               <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="sobre.html">Sobre</a></li>
                    <li><a href="estrutura.html">Estrutura</a></li>
		            <li><a href="faleconosco.html">Fale Conosco</a></li>
                    <li><a href="promocoes.html">Promoções</a></li>
                    <li><a href="servicos.html">Serviços</a></li>
                </ul>
         </div>
    </body>
</html>

Gostei muito do código desse MENU com CSS. Mas analisando o código, achei muito grande cada item do menu e reduzi.

Ana Gauna · Julho 16, 2017

consegui colocar uma borda em volta de cada item do menu, achei que ele ficou melhor assim.


              #menu a{ float: left; font: 1.0em Verdana; background: white; color: black;  <!--  cor fixa do menu -->
                       text-align: center; text-decoration: none;  padding: 5px; border-style: ridge; }
              #menu a:hover{ padding: 5px; border-style: ridge; background: silver; color: darkred; text-decoration: none;

Bruna Garcia · Julho 17, 2017

Em 14/07/2017 at 01:48, Danilo CS disse:
Olá Bruna como vai?

A resposta à sua pergunta é sim e não!

O que você acha de usar o sistema do Boostrap? Ajuda bastante nessa parte...(e em todo o resto) hehehe

Tipo...o width vai ficar 100% na tela, mas para você faça funcionar direitinho em telas menores, você teria que usar um cód adicional.

Tipo isso:
@media (min-width: 168px) and (max-width: 240px) {

}
Já ouviu falar dessa propriedade?

Particularmente eu nunca tive paciência de montar menu por causa dessas coisinhas...

Dá uma olhada nesse exemplo aqui:

https://v4-alpha.getbootstrap.com/examples/starter-template/

É uma roda na mão....digo...mão na roda ;)

Olá Danilo, vou bem e você? Já ouvi falar sim, na verdade andei lendo muito sobre isso, mas confesso que estou um pouco confusa ainda quanto a aplicação desse conceito... Realmente tem que ter bastante paciência rsrs

Obrigada pelo exemplo, vou dar uma olhada!

Bruna Garcia · Julho 17, 2017

Em 15/07/2017 at 23:55, Ana Gauna disse:


<!DOCTYPE html>
<html>
    <head>
        <title>Perimos Barbershop</title>
        <meta charset ="UTF-8" />
        <link rel="stylesheet" href="..\css\estilo.css" />
	    <style>
              @charset UTF=8;
              body{background: gray; margin: 0px; padding: 0px;}
              #menu{width: 50%; }
              #menu ul{margin: 0px; padding: 0px;}
              #menu li{display: inline; list-style: none;}
              #menu a{ float: left; font: 1.0em Verdana; background: white; color: black;  <!--  cor fixa do menu -->
                       text-align: center; text-decoration: none;  padding: 5px; }
              #menu a:hover{ padding: 5px; background: silver; color: darkred; text-decoration: none; <!-- underline --> } <!-- variação de cor do menu passando o mouse  -->
              #incone img{ max-width: 200px; max-height: 200px; width: auto; height: auto; }
              #incone li{display: inline; list-style: none; }
              #incone a{ float: left; }
	     </style>	
    </head>
    <body>
         <div id="incone">
              <li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
         </div>
         <div id="menu">
               <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="sobre.html">Sobre</a></li>
                    <li><a href="estrutura.html">Estrutura</a></li>
		            <li><a href="faleconosco.html">Fale Conosco</a></li>
                    <li><a href="promocoes.html">Promoções</a></li>
                    <li><a href="servicos.html">Serviços</a></li>
                </ul>
         </div>
    </body>
</html>

Gostei muito do código desse MENU com CSS. Mas analisando o código, achei muito grande cada item do menu e reduzi.

Olá, tudo bem? Então, na verdade meu único problema é que não estou conseguindo usar width 100%, eu quero o menu grande mesmo e sem borda, mas mesmo assim, obrigada pelo seu ponto de vista!

Omar~ · Julho 17, 2017

Oi bruna não sei ao exato o que deseja então veja esse exemplo:

https://radmimstore.github.io/homepage/

É um menu multi level responsivo com width 100% e open source o código: https://github.com/radmimstore/homepage

Sobre o bootstrap. É um framework para desenvolvimento de websites onde tudo já está mastigado só basta engolir.

O problema de focar em um framework é que você se torna dependente dele, e se precisa de algo que não há possibilidades de uso com a plataforma você fica de mãos atadas porque o framework te prende a ele e só ele você pode usar. Por isso só serve em pequenos projetos específicos, ou seja projetos nada complexo e muito simples.

Mas posso te garantir que não existe outro melhor o bootstrap é de longe o melhor de todos, não havendo arrependimento em usar exceto pelo caso que já mencionei.

Em caso de uma pessoa que está começando a aprender querer usar um framework, não está desenvolvendo e sim plagiando sem aprender nada.

Danilo CS · Julho 18, 2017

8 horas atrás, Bruna Garcia disse:

Olá Danilo, vou bem e você? Já ouvi falar sim, na verdade andei lendo muito sobre isso, mas confesso que estou um pouco confusa ainda quanto a aplicação desse conceito... Realmente tem que ter bastante paciência rsrs

Obrigada pelo exemplo, vou dar uma olhada!

7 horas atrás, OmarF disse:

Oi bruna não sei ao exato o que deseja então veja esse exemplo:

https://radmimstore.github.io/homepage/

É um menu multi level responsivo com width 100% e open source o código: https://github.com/radmimstore/homepage

Sobre o bootstrap. É um framework para desenvolvimento de websites onde tudo já está mastigado só basta engolir.

O problema de focar em um framework é que você se torna dependente dele, e se precisa de algo que não há possibilidades de uso com a plataforma você fica de mãos atadas porque o framework te prende a ele e só ele você pode usar. Por isso só serve em pequenos projetos específicos, ou seja projetos nada complexo e muito simples.

Mas posso te garantir que não existe outro melhor o bootstrap é de longe o melhor de todos, não havendo arrependimento em usar exceto pelo caso que já mencionei.

Em caso de uma pessoa que está começando a aprender querer usar um framework, não está desenvolvendo e sim plagiando sem aprender nada.

Exatamente!

Basta você ter um pouquinho de paciência.

Eu sugiro fortemente você tentar usar....

;)

Ana Gauna · Julho 18, 2017

@Bruna Garcia

Em Bootstrap o menu ficaria assim:

<!DOCTYPE html>
<html>
    <head>
        <title>Perimos Barbershop</title>
        <meta Charset="UTF-8" content="text/html"; />
        <link rel="stylesheet" href="..\css\estilo.css" />
		
		<!-- BOOTSTRAP (javascript/css) --> 
			 <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- uso com Bootstrap para Mobile --> 
             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
		     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
	         integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
		     integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- FIM BOOTSTRAP -->
		
    </head>
	
    <body>
	
        <!-- inicio do MENU / Bootstrap -->
        <nav role="navigation" class="navbar navbar-default navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
				     <a class="navbar-brand" href="logo.html"><img src="imagens\logo.png"/></a>
                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">  
                             <span class="sr-only">Toggle navigation</span>
                             <span class="icon-bar"></span>    <!--  1 -->
                             <span class="icon-bar"></span>    <!--  2  -->
                             <span class="icon-bar"></span>    <!--  3 -->
                             <span class="icon-bar"></span>    <!--  4 -->                           
                             <span class="icon-bar"></span>    <!--  5 -->
							 <span class="icon-bar"></span>    <!--  6 -->                             
                     </button>
                 </div>
                 <div class="collapse navbar-collapse" id="navbar-collapse">   
                      <ul class="nav navbar-nav navbar-left">
                          <li class="active"> <a href="index.html">Home</a> </li>
                          <li> <a href="sobre.html">Sobre</a> </li>
                          <li> <a href="estrutura.html">Estrutura</a> </li>					  
                         <li><a href="faleconosco.html">Fale Conosco</a></li>
                         <li><a href="promocoes.html">Promoções</a></li>
                         <li><a href="servicos.html">Serviços</a></li>
                      </ul> 
                 </div>
             </div>
        </nav>
        <!-- fim do MENU -->

    </body>
</html>

Bruna Garcia · Julho 24, 2017

Em 17/07/2017 at 16:02, OmarF disse:

Oi bruna não sei ao exato o que deseja então veja esse exemplo:

https://radmimstore.github.io/homepage/

É um menu multi level responsivo com width 100% e open source o código: https://github.com/radmimstore/homepage

Sobre o bootstrap. É um framework para desenvolvimento de websites onde tudo já está mastigado só basta engolir.

O problema de focar em um framework é que você se torna dependente dele, e se precisa de algo que não há possibilidades de uso com a plataforma você fica de mãos atadas porque o framework te prende a ele e só ele você pode usar. Por isso só serve em pequenos projetos específicos, ou seja projetos nada complexo e muito simples.

Mas posso te garantir que não existe outro melhor o bootstrap é de longe o melhor de todos, não havendo arrependimento em usar exceto pelo caso que já mencionei.

Em caso de uma pessoa que está começando a aprender querer usar um framework, não está desenvolvendo e sim plagiando sem aprender nada.

Olá, legal... obrigada pelas dicas ;)

Em 17/07/2017 at 23:32, Danilo CS disse:

Exatamente!

Basta você ter um pouquinho de paciência.

Eu sugiro fortemente você tentar usar....

;)

Vou tentar sim obrigada ;)

Danilo CS · Julho 28, 2017

Deu certo?

Bruna Garcia · Agosto 15, 2017

Em 18/07/2017 at 13:38, Ana Gauna disse:

@Bruna Garcia

Em Bootstrap o menu ficaria assim:


<!DOCTYPE html>
<html>
    <head>
        <title>Perimos Barbershop</title>
        <meta Charset="UTF-8" content="text/html"; />
        <link rel="stylesheet" href="..\css\estilo.css" />
		
		<!-- BOOTSTRAP (javascript/css) --> 
			 <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- uso com Bootstrap para Mobile --> 
             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
		     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
	         integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
		     integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- FIM BOOTSTRAP -->
		
    </head>
	
    <body>
	
        <!-- inicio do MENU / Bootstrap -->
        <nav role="navigation" class="navbar navbar-default navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
				     <a class="navbar-brand" href="logo.html"><img src="imagens\logo.png"/></a>
                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">  
                             <span class="sr-only">Toggle navigation</span>
                             <span class="icon-bar"></span>    <!--  1 -->
                             <span class="icon-bar"></span>    <!--  2  -->
                             <span class="icon-bar"></span>    <!--  3 -->
                             <span class="icon-bar"></span>    <!--  4 -->                           
                             <span class="icon-bar"></span>    <!--  5 -->
							 <span class="icon-bar"></span>    <!--  6 -->                             
                     </button>
                 </div>
                 <div class="collapse navbar-collapse" id="navbar-collapse">   
                      <ul class="nav navbar-nav navbar-left">
                          <li class="active"> <a href="index.html">Home</a> </li>
                          <li> <a href="sobre.html">Sobre</a> </li>
                          <li> <a href="estrutura.html">Estrutura</a> </li>					  
                         <li><a href="faleconosco.html">Fale Conosco</a></li>
                         <li><a href="promocoes.html">Promoções</a></li>
                         <li><a href="servicos.html">Serviços</a></li>
                      </ul> 
                 </div>
             </div>
        </nav>
        <!-- fim do MENU -->

    </body>
</html>

Obrigada :)

Bruna Garcia · Agosto 15, 2017

Em 28/07/2017 at 14:13, Danilo CS disse:

Deu certo?

Eu mudei meu site pra scroll, ai o menu adaptou, mas descobri quais tags que eu precisava usar, eram: deixar o menu display block e usar flex-grow.

Mas por eu estar fazendo o site scroll, estou com outros problemas, um deles é deixar o texto adaptável ao tamanho do site, se você puder me ajudar, eu postei uma tópico com esse problema.

Obrigada pela ajuda atenção :)

Danilo CS · Agosto 21, 2017

Em 2017-8-15 at 13:19, Bruna Garcia disse:

Eu mudei meu site pra scroll, ai o menu adaptou, mas descobri quais tags que eu precisava usar, eram: deixar o menu display block e usar flex-grow.

Mas por eu estar fazendo o site scroll, estou com outros problemas, um deles é deixar o texto adaptável ao tamanho do site, se você puder me ajudar, eu postei uma tópico com esse problema.

Obrigada pela ajuda atenção :)

Mas é claro....eu vou tentar! :)

Desculpa só agora que vi sua mensagem....eu vou ver la...

luiz14 · Agosto 21, 2017

Boa tarde Bruna,

segue esse código:

<!DOCTYPE html>

<html lang="pt-br">
<head>
<title>Perimos Barbershop</title>
<meta charset ="UTF-8" />
<link rel="stylesheet" href="..\css\estilo.css" />
</head>
<body>
<div id="largura">
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="estrutura.html">Estrutura</a></li>
</ul>
</div>
<div id="incone">
<li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
</div>
<div class="menu">
<ul>
<li><a href="faleconosco.html">Fale Conosco</a></li>
<li><a href="promocoes.html">Promoções</a></li>
<li><a href="servicos.html">Serviços</a></li>
</ul>
</div>
</div>
</body>
</html>

@charset"utf-8";

body{
background: gray;
margin: 0px;
padding: 0px;
}
.menu{
width: 100%;
}
.menu ul{
margin: 0px;
padding: 0px;
}
.menu li{
display: inline;
list-style: none;
}
.menu a{
float: left;
font: 1.0em Verdana;
background: white;
color: black;
text-align: center;
text-decoration: none;
padding: 30px;
}
.menu a:hover{
padding: 30px;
background: black;
color: white;
text-decoration: underline;
}

#largura{
width: 100%;
background-color: white;
position: absolute;
}
#incone img{
max-width: 202px;
max-height: 202px;
width: auto;
height: auto;
}
#incone li{
display: inline;
list-style: none;
}
#incone a{
float: left;
}

OBS: Não coloque dois ids iguais em uma mesma pagina, só deve haver um id com mesmo nome em uma página. Eu modifiquei os ids com nome "menu" por classes com nome "menu", as classes podem ter o mesmo nome. Eu coloquei as divs "menu" dentro de uma div com id largura e coloquei 100% o que fez o menu ficar com 100% de largura, coloquei fundo banco e posição absoluta. : )

Danilo CS · Agosto 21, 2017

e eu não achei o post que você falou :)

Bruna Garcia · Agosto 24, 2017

Em 21/08/2017 at 13:39, luiz14 disse:

Boa tarde Bruna,

segue esse código:

<!DOCTYPE html>

<html lang="pt-br">
<head>
<title>Perimos Barbershop</title>
<meta charset ="UTF-8" />
<link rel="stylesheet" href="..\css\estilo.css" />
</head>
<body>
<div id="largura">
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="estrutura.html">Estrutura</a></li>
</ul>
</div>
<div id="incone">
<li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
</div>
<div class="menu">
<ul>
<li><a href="faleconosco.html">Fale Conosco</a></li>
<li><a href="promocoes.html">Promoções</a></li>
<li><a href="servicos.html">Serviços</a></li>
</ul>
</div>
</div>
</body>
</html>

@charset"utf-8";

body{
background: gray;
margin: 0px;
padding: 0px;
}
.menu{
width: 100%;
}
.menu ul{
margin: 0px;
padding: 0px;
}
.menu li{
display: inline;
list-style: none;
}
.menu a{
float: left;
font: 1.0em Verdana;
background: white;
color: black;
text-align: center;
text-decoration: none;
padding: 30px;
}
.menu a:hover{
padding: 30px;
background: black;
color: white;
text-decoration: underline;
}

#largura{
width: 100%;
background-color: white;
position: absolute;
}
#incone img{
max-width: 202px;
max-height: 202px;
width: auto;
height: auto;
}
#incone li{
display: inline;
list-style: none;
}
#incone a{
float: left;
}

OBS: Não coloque dois ids iguais em uma mesma pagina, só deve haver um id com mesmo nome em uma página. Eu modifiquei os ids com nome "menu" por classes com nome "menu", as classes podem ter o mesmo nome. Eu coloquei as divs "menu" dentro de uma div com id largura e coloquei 100% o que fez o menu ficar com 100% de largura, coloquei fundo banco e posição absoluta. : )

Olá obrigada, já resolvi esse problema, eu não usei dois menus, eu usei um só e coloquei a div da imagem no meio das li's, coloquei o menu com display block e usei flex-grow: 1; ai o menu expandiu.

Obrigada pela dica ;)

Bruna Garcia · Agosto 24, 2017

Em 21/08/2017 at 14:28, Danilo CS disse:

e eu não achei o post que você falou :)

Eu também não achei meu post, mas acabei achando outra solução novamente kkk

Obrigada pela atenção!

Arquivado

Problemas ao deixar o menu 100% na tela

Recommended Posts

Bruna Garcia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruna Garcia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo CS 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ana Gauna 45

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ana Gauna 45

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruna Garcia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruna Garcia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo CS 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ana Gauna 45

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruna Garcia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo CS 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruna Garcia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruna Garcia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo CS 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

luiz14 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo CS 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruna Garcia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruna Garcia 1