Menu disappears on mobile or when resize browser

  • Resolved ga122493

    (@ga122493)


    9 years, 1 month ago

    Hello,

    My site is dimotngaydang.us and I am very confused about the menu setting. So I created a child theme using Child Theme Configurator and everything worked great except for the menu bar. When I make my browser smaller, the menu will disappear instead of displaying a drop down menu. When I use the phone, the menu does not show up entirely. Same issue when I tested the parent theme.

    A lot of people online say there is a Mobile Navigation option in the Appearance> Menu> Menu Setting > Theme locations, but I do not see it at all. There is only one option and it is “Primary Menu”.

    I tried to dectivate each and all of my plug-ins but the issue does not go away. My current plug-ins are All In One SEO Pack, Child Theme Configurator, Disable Comments, Jetpack by WordPress.com, Photo Gallery, Pirate Forms, Simple Custom CSS, TinyMCE Advanced, and W3 Total Cache.

    Also, below is the codes inside my Simple Custom CSS

    /*
    Adjust the background image opacity. rgba(0,0,0,x) -> as x get higher, the image gets darker
    */
    .header,
    .header-content-wrap,
    .packages,
    .contact-us {
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.085) !important;
    }

    /*
    Delete Zserif logo in the top left
    */
    .navbar-header.responsive-logo {
    display: none;
    }

    /*
    Change the navi bar background color to white (child theme default: black)
    */
    .navbar {
    background: #FFF;
    border: 0;
    }

    /*
    Change the navi bar text color to black
    */
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
    .navbar .nav > li.current-menu-item > a,
    .navbar .nav > li.current-menu-ancestor > a {
    display: inline;
    color: black;
    }

    /*
    Change the navi bar test hover color to red (child theme default: white)
    */
    .navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
    color: red;
    }

    /*
    Change the space between lines in posts
    */
    .entry-content {
    line-height: 1.7;
    }

    /*
    Delete the “Bookmark this link..” in posts and footer in front page
    */
    footer {
    display: none;
    }

    Some people suggested adding the following codes to Custom CSS but it does not work for me.

    @media (max-width: 768px){
    #main-nav, #main-nav.fixed {
    position: fixed;
    }}

    nav#site-navigation.in {
    height: auto !important;
    }

    Please help and thank you very much!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ga122493

    (@ga122493)

    After trying to deactivating all of my plug-ins, I realized that the issue is caused by the codes I added in Simple Custom CSS.

    /*
    Delete Zerif logo in the top left
    */
    .navbar-header.responsive-logo {
    display: none;
    }

    Would somebody tell me how to delete the Zerif logo without messing with the menu please?

    Thank you!

    Thread Starter ga122493

    (@ga122493)

    Problem solved by making the whole code section of the logo a comment. Adding /* and */ to the following in header.php

    <?php
    /*

    $zerif_logo = get_theme_mod(‘zerif_logo’);

    if (isset($zerif_logo) && $zerif_logo != “”):

    echo ‘‘;

    echo ‘<img src=”‘.esc_url( $zerif_logo ).'” alt=”‘.esc_attr( get_bloginfo(‘title’) ).'”>’;

    echo ‘‘;

    else:

    echo ‘‘;

    if( file_exists(get_stylesheet_directory().”/images/logo.png”)):

    echo ‘<img src=”‘.get_stylesheet_directory_uri().’/images/logo.png” alt=”‘.esc_attr( get_bloginfo(‘title’) ).'”>’;

    else:

    echo ‘<img src=”‘.get_template_directory_uri().’/images/logo.png” alt=”‘.esc_attr( get_bloginfo(‘title’) ).'”>’;

    endif;

    echo ‘‘;

    endif;

    */
    ?>

    </div>

    Alexandra

    (@alexandrastan001)

    Hello,

    Glad that you got it solved and thank you for sharing your solution with us.

    Best regards,
    Alexandra

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Menu disappears on mobile or when resize browser’ is closed to new replies.