Website is not mobile/ipad responsive

[Jeypolitan]

Hi there,

The website is unfortunately not responsive on mobile or iPads. A few questions:

1: When I access the site from a mobile or iPad device, I would like the sidebars to be completely hidden. Currently, going on mobile or iPad devices, the sidebars appear at the bottom of the site (not wanted). How can I completely hide/remove the sidebars on smaller devices like mobile and iPad?

2: The top navigation bar (black background on desktop) becomes partially light grey when on mobile or iPad. It should always be fully black, not turn light grey on smaller devices. How can I stop it from turning light grey on smaller devices?

3: On mobile devices, when you scroll down, a house icon jumps and appears in the middle of the navigation bar which looks terrible. How can I stop the house logo from appearing/jumping on mobile devices only?

4: Similarly as point 3, on iPad devices, the “Jeypolitan” image logo appears in the middle of the navigation bar. This should only appear on desktop. How do I hide it on iPad devices?

Many thanks!

[Joao]

Hi There,

1 & 2 > add the following CSS to Theme Options CSS

@media(max-width: 979px) {
.x-main.left {
display: none;
}

.x-topbar .p-info {
  
    background: none !important;
}
}

3 - I could not see any house logo, could you provide a screenshot?

4- The logo appears on the logobar just ask on desktop, you would like to completely remove the logo from mobile devices and ipads? Please clarify

Thanks!

[Jeypolitan]

Hi Joao,

Many thanks for your reply

1. With the CSS, it removed everything apart from the sidebar on mobile and tablet. It removed the whole blog, while I would only like to hide/remove sidebar on mobile and tablet please.

2. The CSS fixed point number 2 (colour of the main navigation).

3. The house icon appears on mobile devices when you scroll down when the menu is open:
   

4. Yes, I would like to completely remove the Jeypolitan image logo from mobile devices and tablets only (not desktops).
   

Many thanks!

[paul.r]

Hi,

You can try this code instead

@media(max-width: 979px) {
    .x-sidebar.right {
       display:none;
    }
.x-navbar .ubermenu-main .ubermenu-nav li.menu-item-95 {
       display:none
   }
}

@media (max-width: 767px) {
.x-topbar .p-info {
    background-color: #1F1F1F;
}
}

Hope this helps

[Jeypolitan]

Hi Paul,

Unfortunately the icon and logo issue still remains on mobile.
Mobile:

iPad:
For iPad, could we just instead move the search icon and the social media icons to a single row below?

If it helps at all, this is the current jQuery code to make the Jeypolitan logo appear when scrolling down:

jQuery(’.entry-header’).each(function() {
jQuery(this).closest(’.post’).prepend(jQuery(this));
});

jQuery(document).ready(function($){
var navbar_logo = $(’#menu-item-95’);
navbar_logo.hide();
var x_logobar = $(".x-logobar").height();
$(window).scroll(function(){
if ($(this).scrollTop() > x_logobar) {
navbar_logo.show();
$(’.x-logobar’).css(‘visibility’, ‘hidden’);
} else {
navbar_logo.hide();
$(’.x-logobar’).css(‘visibility’, ‘visible’);
}
});
});

Please advise.
Many thanks!

[ruenel]

Hey There,

Thanks for updating in!

1.) I am not seeing the icons or the logo on mobile. The whole menu is not visible.

2.) To make sure that your menu, search and social icons is in one single row, please update this code:

@media(max-width: 979px) {
    .x-sidebar.right {
       display:none;
    }
.x-navbar .ubermenu-main .ubermenu-nav li.menu-item-95 {
       display:none
   }
}

And replace it with this code instead:

@media(max-width: 979px) {
    .x-sidebar.right {
       display:none;
    }

    .x-navbar .ubermenu-main .ubermenu-nav li.menu-item-95 {
       display:none
   }

   .x-navbar .x-container.max.width {
        width: 96%;
        max-width: 100%;
   }
}

Please let us know how it goes.