Support Center Visit Demo License manager Buy @ envato

Lossing Main Nav only in portrait mode ipad

scott74scott74
in Menu / Mega menu
I noticed that in portrait mode in an Ipad I loos my navigation bar and the sub header rises up in its place.

This doesn't happen when shrinking the screen browsers like this but on the actual ipad it does



Anything you can think of that would cause this?

Thanks Scott

Comments

  • AlbertAlbert
    Hi,

    we checked your site on our side and we did not noticed anything like that. In portrait mode, we got responsive menu active.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • scott74scott74
    The green navigation did not go away?

    I still have the hamburger bun menu but the green nave is was disappears on me..

    Landscape

    portrait

    Also noticed the highligh text where I have the phone number is black on tablet and while on desktop. Is this something with iOS?


    Thanks for clarifying
  • AlbertAlbert
    Yes, this green background disappears but we thought that you were talking about the menu. We recommend to remove all css's to check the problem. If this won't help, then please send us private message with access to page.

    ios read phone number as a link always and that's why it is different color on ios devices.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • scott74scott74
    It has something to do with the logo css I had to overhang which was also affecting the submenu pulling in up all the way to the top so the about and plus button to the right of it was behind the hamburger bun when navigating..

    Not sure what to do to still have the overhang logo and fix?

    @media only screen and (max-width: 767px){
    #Top_bar .logo #logo img {
        max-height: 130px !important;
        margin-top: -27px;
        max-width: 250px;
        position: absolute;
        right: 10%;
        }
    }


    /*Overhang Logo Z Index Tablets Desktop Only*/
    @media only screen and (min-width: 767px) {
    .header-plain #Top_bar #logo {
        height: 150px !important;
        line-height: 150px !important;
        position: absolute !important;
        z-index: 5000;
        top: -30px;
        left: 0;
         }
    }
  • AlbertAlbert
    To be honest we have no idea as well because this css looks fine. We only got idea how to rebuilt header to keep both. We have no idea why above css affect iPad only.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • scott74scott74
    ok... If I wanted to get rid of the overhang with the z index and all that since it might be causing the problem.. Whats the best way to have the logo take up the exact total height of the have bar without stretching it and 0 padding between the nav and logo.

    Been trying to mess around with it but the header area is so tricky with one thing affecting the other

    Your guys stuff looks great on desktop and mobile but you are usually just using text for your logos and most business logos vary in height and width so then don't stand out. 

    Would like to utilize the entire space if I can't get the overhang working. Seems to be causing issues. Sometime on certtain pages on the ipad it doesnt shrink down and covers the breadcrumb area title .. Has to be something going on with the absolute positioning  and z index stuff.

    Thanks for you help again..

  • AlbertAlbert
    Sorry but unfortunately we can not help you in this case. In our opinion, header files needs advanced modifications because custom css won't work here at all as you want. But because of obvious reasons we do not offer such customization, you need to do it yourself or you should contact with site developer who will be able to do this for you if you don't now how.

    Thanks for understanding!
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.