-
Posts
-
Hi
Based a few other threads, I have edited the avia.js file and added some custom CSS so that my menu doesn’t overlap my logo on the iPad. When I go on to the iPad in portrait mode however there is no menu at all, no normal menu or mobile menu. Here is the settings I am using:
avia.js:
var menu = header.find(‘.main_menu ul:eq(0)’),
first_level_items = menu.find(‘>li’).length,
bottom_menu = $(‘html’).is(‘.bottom_nav_header’),
switchWidth = 1024;
if(first_level_items > 7 && !bottom_menu)
{
switchWidth = 1100;
header.addClass(‘mobile_menu_tablet’);
custom css:
@media only screen and (max-width: 1024px) {
.responsive #header .main_menu ul {
display: none;
}
}
I would also like to stop the side bar from showing when the iPad is in portrait if possible.
Regards,
Rob
I guess actually I’d like to act as it does on the iphone screen when the ipad is portrait but then switch to the normal website design if the ipad is in portrait. Is this possible?
Regards,
Rob
Hi,
It is possible, but it would need some hard coding, and thats something you would need to work with a freelance developer.
Regards,
Josue
Hi
Ok, thanks Josue. That’s a shame. Is there anyway to stop the sidebar from displaying when the iPad is in portrait, (or just when the screen size is smaller than 768 x 1024?
Regards,
Rob
Hi Rob,
That is actually the way it is by default. The sidebar is not shown for mobile layouts. So check to see if you have any css you’ve added that is making the sidebar display value something other than display: none below 767px wide.
Regards,
Devin
Hi Devin
I have done a lot of tweaking, so it is possible. Here is my CSS, I couldn’t see anything:
.logo img{
width: 290px;
height: 80px;
position: relative;
top: 5px;
}
.social_header .phone-info {
color: #014073;
font-size: 1.5em;
}
.main_menu ul:first-child>li>a {
font-size: 15px;
}
#top .main_menu .menu li ul a{
line-height:23px;
padding:8px 15px;
font-size: 14px;
min-height: 23px;
}
.title_container .main-title {
font-size: 18px;
position: relative;
min-height: 36px;
font-weight: 600;
}
#menu-item-search {
display: none;
}
.main_menu {
right: -20px;
}
#header_main .container, .main_menu ul:first-child > li > a {
height: 120px !important;
line-height: 120px !important;
}
h2.post-title {
color: #014073;
}
#top .template-blog h1.post-title, #top .template-blog h1.post-title a {
color: #014073;
}
#wp-calendar {
width: 99%
}
#footer .widgettitle {
color: #ffffff;
font-size: 20px;
}
@media only screen and (max-width: 767px) {
.responsive #header .social_bookmarks {
margin-bottom: 10px;
}
}
.news-excerpt p {
text-align: justify;
}
h2{
text-transform: none !important;
font-size: 24px;
letter-spacing:0px !important;
}
.widgettitle {
text-transform:capitalize;
letter-spacing:0px !important;
font-size: 16px;
}
.main_menu ul:first-child > li.current-menu-item > a, .main_menu ul:first-child > li.current_page_item > a {font-weight: 800;}
.main_color .sidebar .current_page_item>a {color:#000000; font-weight:bold;}
.current_page_item>a {font-weight:400;}
.buttonClientArea {
display: inline-block !important;
text-align: center;
vertical-align: middle;
padding: 5px 10px;
border: 1px solid #013662 !important;
border-radius: 8px;
background: #014073 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0266b8), to(#013662)) !important;
background: -moz-linear-gradient(top, #0266b8, #013662)!important;
background: linear-gradient(to bottom, #0266b8, #013662)!important;
text-shadow: #01203a 1px 1px 1px!important;
font: normal normal bold 11px arial!important;
color: #ffffff;
text-decoration: none;
}
.buttonClientArea:hover,
.buttonClientArea:focus {
border: 1px solid #014073!important;
background: #0d88ed!important;
background: -webkit-gradient(linear, left top, left bottom, from(#027add), to(#014176))!important;
background: -moz-linear-gradient(top, #027add, #014176)!important;
background: linear-gradient(to bottom, #027add, #014176)!important;
color: #ffffff;
text-decoration: none;
}
.buttonClientArea:active {
background: #0d88ed !important;
background: -webkit-gradient(linear, left top, left bottom, from(#013662), to(#013662))!important;
background: -moz-linear-gradient(top, #013662, #013662)!important;
background: linear-gradient(to bottom, #013662, #013662)!important;
}
.sidebar li a {
color: #4C4646 !important;
}
@media screen and (max-width: 767px) {
#top .social_bookmarks { display: none; }
.header_color .container_wrap_meta { padding-top: 10px; }
.login_buttons {
position: absolute;
top: 50%;
left: 40%;
}
}
@media only screen and (max-width: 1339px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 6px;
font-size: 14px;
}
}
.avia-icon-list .iconlist_icon {
background-color: #014073 !important;
}
.responsive .mobile_menu_tablet .main_menu { display: block; }
Regards,
Rob
- The topic ‘Mobile Menu not showing on iPad’ is closed to new replies.