3 LINE MENU MISSING (RESPONSIVE MOBILE)
-
Good afternoon, I have the following code to put a semitransparent white bar behind the menu of my web page:
Header # masthead {
Background: rgba (255,255,255.0.9);
Height: 110px;
Top: 0px;
Left: 0px;
}But adding it removes the option to deploy menu in the responsive of the phone.
Can someone help me please?
My web: http://www.egr-studio.com
thank you very much!!
-
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,
KharisMany 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,
KharisFact! 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,
KharisExcuse 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,
KharisHello 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,
Kharisworks 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,
KharisWORKING!! BOSS!! thanks alot!
RESOLVED!
- The topic ‘3 LINE MENU MISSING (RESPONSIVE MOBILE)’ is closed to new replies.