3 LINE MENU MISSING (RESPONSIVE MOBILE)

Hello there,

That code doesn’t remove the mobile menu button, but it just becomes invisible due to its default color is white. To make it noticeable, you should color it to black or other dark color of your choice. Add this CSS code, please.

.btn-menu {
  color: #000;
}

Regards,
Kharis

Many thanks for the speed Kharis! I still do not see the menu, I do not know if it’s because I cover an image. ??

ALL MY CSS CUSTOM, Maybe you look the error. Thanks alot!

#mainnav-mobi ul > li > a {
display: block;
text-decoration: none;
padding: 10px 50px;
color: rgb(0,255,255);
}
/*PIE DE PAGINA: ELIMINAR “CREADO POR WORDPRESS” */
.site-info.container {
display: none;
}

/*MENU: BARRA SEMITRANSPARENTE Y POSICIóN DE ESTA*/
header#masthead {
background: rgba(255,255,255,0.9);
height:180px;
top:0px;
left:0px;
}
/*MENU MOVIL: PARA QUE SE VEA*/
.btn-menu {
color: #000;
}

/*MENU: TAMA?O LETRAS */
#mainnav ul li a {
font-size: 13px;
}

/*SUBMENU: TAMA?O BARRA*/
#mainnav ul ul a {
width: 200px;
height:40px;
}
#mainnav ul li ul {
width: 200px;
}

/*SUBMENU: SEMITRANSPARENTE*/
#mainnav .sub-menu li a {
background: rgba(255,255,255,0.9);
}

/*SUBMENU (para cuando este centrado): EN LINEA Y SIN SOLAPAR*/
#mainnav ul ul li {
display: table;
text-align: left;
}

/*SUBMENU: ELIMINAR LINEAS SEPARACION*/
#mainnav .sub-menu li a {
border: none;
}

/*ALTURA ENCABEZADO*/
.header-image {
height: 200px;
}

/*POSICIóN DEL MENU*/
@media screen and (min-width: 1025px) {
.header-wrap .row .col-md-8.col-sm-4.col-xs-12:nth-child(2) {
float: center;
top:120px;
}

img.site-logo {
position: absolute;
top: -10px;

}
}

/*TAMA?O LOGO*/
.site-logo {
max-height: 150px;
}

/*RELLENO CONTENIDO TRANSPARENTE*/
.page-wrap .content-wrapper{
background-color:transparent;
}
/*RELLENO CONTENIDO/ENCABEZADO: ELIMINAR ESPACI0*/
.page-wrap {
padding-top: 0px;
}

/*ELIMINAR RELLENO PIE DE PAGINA*/
.site-footer {
padding: 0px 0;
}

/*BOTONES ACCION: FONDO TRANSPARENTE*/
.preloader .pre-bounce1, .preloader .pre-bounce2, .roll-team .team-item .team-pop, .roll-progress .progress-animate, .roll-socials li a:hover, .roll-project .project-item .project-pop, .roll-project .project-filter li.active, .roll-project .project-filter li:hover, .roll-button.light:hover, .roll-button.border:hover, .roll-button, .roll-icon-box.white .icon, .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span, .go-top, .bottom .socials li:hover a, .sidebar .widget:before, .blog-pagination ul li.active, .blog-pagination ul li:hover a, .content-area .hentry:after, .text-slider .maintitle:after, .error-wrap #search-submit:hover, #mainnav .sub-menu li:hover > a, #mainnav ul li ul:after, button, input[type=”button”], input[type=”reset”], input[type=”submit”], .panel-grid-cell .widget-title:after {
background-color: rgba(255,255,255,0.35);

border:none;
}

/*BOTONES ACCION: SEPARACION*/
.roll-button.button-slider {
margin-right: 25px;
margin-left: 25px;
color: rgba(0,0,0,1);
font-size: 13px;
}
.nav-menu {
display: table;
margin: 0 auto;
}

html,
body.page-id-272{
height: 100%;
}

.page-id-272 #main,
.page-id-272 .site,
.page-id-272 #pl-272,
.page-id-272 #primary,
.page-id-272 #pg-272-0,
.page-id-272 .page-wrap,
.page-id-272 .entry-content,
.page-id-272 .content-wrapper,
.page-id-272 .content-wrapper > .row,
.page-id-272 .siteorigin-panels-stretch{
height: 100%;
}

I can see the butor for a few seconds. But i think the image cover the button

Hello there,

Please try to temporarily remove all of your custom CSS code and leave this one alone.

.btn-menu {
  color: #000;
}

Let me know how it goes.

Regards,
Kharis

Fact! Thank you very much for the help!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Excuse me, how can I do to keep the button with the white bar like tapeworm (holding my css)? If I re-enable the css, the problem remains. Do you know where the error is?

Thank you

Hello there,

I’m not quite sure. However, please restore all of your custom CSS and exclude this one:

header#masthead {
  background: rgba(255,255,255,0.9);
  height:180px;
  top:0px;
  left:0px;
}

Let me know how it goes.

Regards,
Kharis

Hello Kharis, thanks for the reply.
If i delete the code at mobile works well. But i want ther white semitransparent bar for the menu. Maybe you can modify this css for work correctly on mobile?

Thanks alot!

You’re welcome, Edgar!

Please try this code:

header#masthead {
  background: rgba(255,255,255,0.9);
}

Regards,
Kharis

works well, but is too small. Id y add:

header#masthead {
background: rgba(255,255,255,0.9);
height:180px;
}

I have the problem! OMG! It’s imposible!

Thanks for your help you are a boss!

Hello there,

You’re most welcome here!

What’ll happen if you try removing this code:

img.site-logo {
  position: absolute;
  top: -10px;
}

Regards,
Kharis

WORKING!! BOSS!! thanks alot!

RESOLVED!