Support » Theme: Sydney » 3 LINE MENU MISSING (RESPONSIVE MOBILE)

  • Resolved EDGAR_GR

    (@edgar_gr_90)


    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!!

Viewing 15 replies - 1 through 15 (of 16 total)
  • 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

    Thread Starter EDGAR_GR

    (@edgar_gr_90)

    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. 🙁

    Thread Starter EDGAR_GR

    (@edgar_gr_90)

    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%;
    }

    Thread Starter EDGAR_GR

    (@edgar_gr_90)

    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

    Thread Starter EDGAR_GR

    (@edgar_gr_90)

    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

    Thread Starter EDGAR_GR

    (@edgar_gr_90)

    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

    Thread Starter EDGAR_GR

    (@edgar_gr_90)

    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

    Thread Starter EDGAR_GR

    (@edgar_gr_90)

    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

    Thread Starter EDGAR_GR

    (@edgar_gr_90)

    WORKING!! BOSS!! thanks alot!

    Thread Starter EDGAR_GR

    (@edgar_gr_90)

    RESOLVED!

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘3 LINE MENU MISSING (RESPONSIVE MOBILE)’ is closed to new replies.