Lossing Main Nav only in portrait mode ipad

scott74 · September 2015

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

Albert · September 2015

Hi,

we checked your site on our side and we did not noticed anything like that. In portrait mode, we got responsive menu active.

scott74 · September 2015

The green navigation did not go away?

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

Landscape

http://screencast.com/t/riPwAO52r2

portrait

http://screencast.com/t/gdiEwX6rdZiE

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

Albert · September 2015

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.

scott74 · September 2015

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;

}

Albert · September 2015

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.

scott74 · September 2015

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

http://screencast.com/t/VNYELTP929K

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

Albert · September 2015

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!

Lossing Main Nav only in portrait mode ipad

Comments

This website uses cookies