CODEWITHSUNDEEP
htmlcss
SorryEh
SorryEh

Reputation: 928

How to get mobile nav-menu to appear in landscape mode?

I'm trying to adjust for tablets with a css resolution of 603x966 (ie Nexus 7), when in Landscape mode the navigation menu goes into this ridiculous mode "More Navigational Options" (not written by me and I can't find the css to fix it). It should go into mobile menu, or, because the screen is still wide enough, the nav bar should still fit. Please see emulation below.

MobileTest.me

You'll have to click on options in the top left and set orientation to landscape to see what I'm talking about. In portrait, the page looks good, it's just landscape that is not working well. (works great for the ipad though)

This is the HTML for the "more navigational options" (which if I remove, nav is gone):

<a id="responsive-nav" class="showMenu" href="#" title="Navigation Menu">more navigational options</a>

Responsive-nav is what I cannot find, here is the ShowMenu CSS code:

.showMenu {
        display: block;
        background: url(http://convio.cancer.ca/mResponsive/images/icons/BT_menu_64.png) no-repeat center;
        background-size: 48px 48px;
        height: 80px;
        right: 0;
        top: 0;
        text-indent: -999999px;
        font-size: 0;
        position: absolute;
        z-index:11;
        border-left: 1px solid #DDDDDD;

    }


    .showMenu2 {

        display: block;
        width: 60px;
        height: 80px;
        right: 0;
        top: 0;
        font-size: 0;
        position: absolute;
        z-index:11;
        border-left: 1px solid #DDDDDD;
    }

I was thinking of using

@media only screen and (min-width:603px) and (max-width:966px) and (orientation:landscape){ 


}

but I'm not even sure how to go about doing it because I can't figure out what's causing the nav to disappear in the first place.

All suggestions are appreciated! thank you for your time!

Upvotes: 0

Views: 931

Answers (1)

Mark
Mark

Reputation: 43

Is the CSS loaded from an external file? The ID must be loaded from somewhere.

Alternatively the 'responsive-nav' ID may not have any associated styling and could be simply used as some kind of reference for some javascript?

Need to see what styles, scripts are being loaded and how

Upvotes: 1

Related Questions