anchors in navigation icons on iPad

Hi John,

unfortunately it doesn’t look fine for us. My client and I both see that the navigation banner covers the heading on our ipads when you click on any of the icons. Please see the examples below of what a page looks like on our ipads and what it looks like when you click on Executive Programs for example.
No matter which icon you click on all pages the navigation always covers the heading.
https://www.dropbox.com/s/6dw5zdidqtsrmky/anchor-1.png?dl=0
https://www.dropbox.com/s/liu1um93qgmlg67/anchor-2.png?dl=0

Thanks,
Carolin

I tried what Mike suggested in the last message (Anchor issue with sticky header on iPad). That didn’t change anything. So I went on the website that he referenced and added the orientation and other pixel ratio. The code is now as below but still no change unfortunately:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
and (-webkit-min-device-pixel-ratio: 2) { .anchor {
display: block!important;
height: 100px!important;
margin-top: -100px!important;
visibility: hidden;
}}

And I’m lost when I read the other thread :S
I’m not a programmer but Graphic Designer so I don’t understand what they are talking about when it comes to js files and where they live.

Is there something else I could put into the Quick CSS?

Thanks!
Carolin

• This reply was modified 7 years, 2 months ago by messmeriza.

Hi Ismael,

yes I know it’s fine on any device or browser but not on the iPad!

Will your code fix it on the iPad?

Thanks,
Carolin

Hi Ismael,

nothing has changed on the iPad after I put the code into Quick CSS. Can you check for yourself, please.

Is there something in my QUick CSS that overwrites what you gave me?

Thanks,
Carolin

Hi Ismael,

I have only put the last code you gave me into the functions.php file now. I cleared the browsing data on my ipad in the browser settings. But no change on the ipad. Is there anything in my Quick CSS that could interfere with your code:

.main_color tr {
background: #fff !important; border-color: #fff !important;
}

td {
border-width: 0px !important;
}

.grid-content {
min-height: 100px;
}

.page-id-3274 #av_section_1 .iconbox_icon:hover:before {
color: darkgray;
}

.page-id-3689 #av_section_1 .iconbox_icon:hover:before {
color: darkgray;
}

.avia-testimonial-meta {
margin-left: 0;
}

.iconbox_content_title {
text-transform: none !important;
}

.search .date-container, .search .date-container + .text-sep {
display: none !important ;
}

.logo img {
height: auto;
width: 300px;
height: 77px;
}

.avia-testimonial .avia-testimonial_inner{
font-style: italic;
font-size: 15px;
}

.page-id-3777 .avia-builder-el-3 .iconbox_icon:hover:before, .page-id-3777 .avia-builder-el-5 .iconbox_icon:hover:before, .page-id-3777 .avia-builder-el-7 .iconbox_icon:hover:before{
color: darkgray;
}

.iconbox_icon:hover:before {
color: darkgray !important;
}

#top .iconbox_left_content .iconbox_icon, #top .iconbox_right_content .iconbox_icon, #top .iconbox_top .iconbox_icon, #top .iconbox.av-no-box .iconbox_icon {
width: 70px;
height: 70px;
line-height: 70px;
font-size: 35px;
}

.reports-isc .av_textblock_section{
margin:20px 0!important;
}

.avia-builder-el-19 {
height: 202px !important;
}

@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block !important;
}
}
body .column-top-margin {
margin-top: 0px!important;
}
@media only screen and (min-width: 768px) and (max-width: 800px) {
.menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special, #menu-item-search {
display: block;
}
}
.av-main-nav > li > a {
padding: 0 8px;
}
@media only screen and (max-width: 1366px) and (min-width: 768px) {
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
display: none;
}

.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
display: block;
}
}
@media only screen and (max-width: 1024px) {
.responsive #top .av-submenu-container {
top: auto !important;
position: relative !important;
height: auto;
min-height: 0;
margin-bottom: -1px;
}
}

Thanks,
Carolin