Thales Everton

Felipe Guedes Coutinho, sim cara de alguma forma você me ajudou. Porém existem três problemas que não consegui solucionar, são eles: 1. A imagem da lupa que você deixou. ( mesmo eu substituindo pela que eu quero, ela ainda fica lá) 2. Queria também deixar o nome "Pesquisar" aparecendo dentro da caixa, e não encontrei a parte para configurar as fontes. 3. Eu já tentei colocar outra caixa de pesquisa na parte do "topo" à direita e dentro do menu fixo do blog, mas fica dando erro no código html e nem ao menos salva as alterações. ( sou muito iniciante mesmo man ) >> No mais, muito obrigado por me responder fica na Paz.

@Megao Eu não sei se esse é o HTML completo do menu, mas creio que sim. <center><div id='menu-wrapper'> <nav> <a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a> <ul class='menu'> <li><a href='https://maisdeconcursosgratis.blogspot.com/'><i class='fa fa-home'/> INÍCIO</a></li> <li><a class='INÍCIO' href='#'><i class='fa fa-laptop'/> SOBRE O BLOG</a> <ul class='sub-menu'> <li><a href='#'>QUEM SOU?</a></li> <li><a href='#'>OBJETIVOS</a></li> </ul> </li> <li><a href='#'><i aria-hidden='true' class='fa fa-graduation-cap'/> CURSOS COMPLETOS</a> <ul class='sub-menu'> <li><a href='#'>POR MATÉRIAS</a> <ul> <li><a href='#'>PORTUGUÊS</a></li> <li><a href='#'>MATEMÁTICA</a></li> <li><a href='#'>DIREITO CONSTITUCIONAL</a></li> <li><a href='#'>DIREITO ADMINISTRATIVO</a></li> <li><a href='#'>DIREITOS HUMANOS</a></li> <li><a href='#'>LEGISLAÇÃO DE TRÂNSITO</a></li> </ul> </li> <li><a href='#'>Sub-Menu 3</a> <ul> <li><a href='#'>Sub Sub-Menu 1</a></li> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> <li><a href='#'>Sub Sub-Menu 5</a></li> </ul> </li> </ul> </li> <li><a href='#'><i aria-hidden='true' class='fa fa-book'/> CADERNOS DE QUESTÕES</a> <ul class='sub-menu'> <li><a href='#'>Sub-Menu 1</a></li> <li><a href='#'>Sub-Menu 2</a> <ul> <li><a href='#'>Sub Sub-Menu 1</a></li> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> <li><a href='#'>Sub Sub-Menu 5</a></li> </ul> </li> <li><a href='#'>Sub-Menu 3</a> <ul> <li><a href='#'>Sub Sub-Menu 1</a></li> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> <li><a href='#'>Sub Sub-Menu 5</a></li> </ul> </li> </ul> </li> <li><a href='#'><i aria-hidden='true' class='fa fa-pencil'/> SIMULADOS EXCLUSIVOS</a></li> <li><a href='#'><i class='fa fa-envelope'/> CONTATO</a></li> </ul> </nav></div></center> >> CÓDIGO CSS: #menu-wrapper{ position:fixed; z-index:9999; width:100%; } nav { display: block; margin-top: 0px; background: $(menu.background.color); } .menu {display: block;} .menu li { display: inline-block; position: relative; z-index: 100; } .menu li:first-child { margin-left: 0;} .menu li a { font: $(menu.font); text-decoration: none; padding: 20px 15px; display: block; color: $(menu.text.color); transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a { color: $(menu.selected.text.color); background: $(menu.selected.background.color); } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px; position: absolute; left: 0px; background: $(submenu.background.color); z-index: 99; transform: translateY(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color:$(submenu.background.color); border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 13px; font-weight: normal; display: block; color:$(submenu.text.color);; background: $(submenu.background.color); } .menu ul li a:hover,.menu ul li:hover>a { background: $(submenu.selected.background.color); color: $(submenu.text.color.hover); } .menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translateY(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: $(submenu.background.color); border-width: 6px; margin-top: -6px; } .menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translateY(0,0); } .responsive-menu { display: none; width: 100%; padding: 20px 15px; background: $(menu.background.color); color: $(menu.text.color) !important; text-transform: uppercase; } .responsive-menu:hover { background: $(menu.selected.background.color); color: $(menu.selected.text.color); text-decoration: none; } a.homer { background: $(menu.background.color);} @media (max-width: 1024px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu {display: block; margin-top: 0px; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: $(submenu.background.color); color: $(submenu.text.color); } .menu li a:hover,.menu li:hover>a { background: $(menu.selected.background.color); color: $(menu.selected.text.color); } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; } } >> Também tem esse CÓDIGO JAVASCRIPT E JQUERY: <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,500,600' rel='stylesheet' type='text/css'/> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/> <script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <!--Related Posts with thumbnails Scripts and Styles Start--> <script src='http://static.tumblr.com/glpbb7a/odhnldmus/postagensrelacionadasparablog.js' type='text/javascript'/> <!--Related Posts with thumbnails Scripts and Styles End--> <b:include data='blog' name='google-analytics'/> <script type='text/javascript'> /*<![CDATA[*/ //Profile photo resize script $(document).ready(function(){$("#main-slider div img",$(this)).each(function(){var src=$(this).attr("src").replace(/\/s[0-9]+/g,'/h480-w640-c');$(this).attr("src",src)})}); /*]]>*/ </script> <script type='text/javascript'> /*<![CDATA[*/ //Profile photo resize script $(document).ready(function(){$("#Profile1 a img",$(this)).each(function(){var src=$(this).attr("src").replace(/\/s[0-9]+/g,'/s250-c');$(this).attr("src",src)})}); /*]]>*/ </script> <script type='text/javascript'> /*<![CDATA[*/ //Profile photo resize script $(document).ready(function(){$("#Image99 img",$(this)).each(function(){var src=$(this).attr("src").replace(/\/s[0-9]+/g,'/s250-c');$(this).attr("src",src)})}); /*]]>*/ </script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ var touch = $('#resp-menu'); var menu = $('.menu'); $(touch).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); if(w > 767 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); //]]> </script> >> Eu queria colocar a caixa de pesquisa expansiva (Aquel que fica em um tamanho, e quando clica para fazer a pesuisa ela se expande mais um pouco.) que foi exemplificada lá em cima no segundo post.

AndersonMamede Opa! Muito bom o exemplo que você passou Anderson. Mas você poderiamedizer como faço para colocar essa caixa de pesquisa integrada no menu fixo do meu blog? pois já tentei copiando o HTML e o CSS e não dá certo, fica aparecendo erro quando estou editando o HTML. Vlw