Menu not visible on mobile site

  • Author
    Posts
  • #137316

    oskarhauks
    Member

    Hi team,

    We are experiencing problems with the mobile version of our site. The menu button(s) are not visible on the front page. When previewing the mobile site when editing it is visible, but when using an actual mobile it does not. Can someone please help us figuring this out?

    Thanks,
    Óskar

    The blog I need help with is vinisro.is.

    #137764

    mkrdip
    Theme Author

    Hi Óskar,

    Extremely sorry for the issue you are facing. Please give me access to your site as Admin, my username: mkrdip.

    Cheers.

    #137930

    oskarhauks
    Member

    Done!

    Please let me know when you are done.

    Regards,
    Óskar

    #138145

    mkrdip
    Theme Author

    Hi Oskar,

    I fixed it using CSS codes via Customizer > CSS. For the reference the following codes are there:

    @media screen and (max-width: 50em) {
    	.menu-toggle {
    		z-index: 1;
    	}
    }

    Let me know if you need more help.

    Cheers.

    #138546

    steinhoffjk
    Member

    Does this allow for the menu to show up on mobile app? I don’t want the hamburger view on the mobile site.

    #138559

    oskarhauks
    Member

    Hi Mkrdip,

    Yes it fixed it for a while, but then it looks as if your code went away. I managed to add it manually, but can you look into fixing this permanently?

    Thanks,
    Óskar

    #139428

    mkrdip
    Theme Author

    Hi Óskar,

    Not having Site Title or Logo is causing this issue. I have logged it as an issue in our tracker. Hope it gets fixed soon.

    Hi @steinhoffjk,

    Please use this CSS if you don’t want the hamburger menu toggle.

    @media screen and (max-width: 50em) {
        .main-navigation a {
            font-size: 14px;
            line-height: 1.85714285714286;
            border-top: none;
            padding: 10px 0;
            font-weight: 800;
        }
        .menu-toggle, .dropdown-toggle {
            display: none;
        }
        .branding-nav-wrapper>div, .rtl .branding-nav-wrapper>div {
            display: inline-block;
            width: auto;
            clear: none;
            float: none;
            padding: 0;
            vertical-align: bottom;
            font-size: 16px;
            padding-top: .75em;
            padding-bottom: .8125em;
        }
        .main-navigation-wrapper, .dropdown-toggle {
            background-color: transparent;
        }
        .main-navigation .twelve>div>ul>li {
            min-width: auto;
            width: auto;
        }    
    }
    
    @media screen and (max-width: 50em) {
        .main-navigation input.search-field {
            padding-top: 6px !important;
            padding-bottom: 6px !important;
        }
    
        .main-navigation form, .main-navigation input.search-field, .main-navigation label {
            border: none;
            font-size: 14px;
            line-height: 1.625;
            width: 100%;
            display: block;
            margin: 0 !important;
            padding: 0 !important;
        }
    }
    
    @media screen and (max-width: 50em) {
        .main-navigation form:after {
            font-family: 'FontAwesome';
            content: '\f002';
            font-size: 10px;
            line-height: 1;
            position: absolute;
            right: 13px;
            top: 7px;
        }
    }

    Cheers guys.

The topic ‘Menu not visible on mobile site’ is closed to new replies.