[mwiedmannParticipant]

Hi there,

a while ago you showed me how to put the footer underneath the sidebar: http://www.nicolewiedmann.de
And it still looks fine!

However, on mobile devices and small screens (whenever the mobile menu is displayed) it looks awkward.
Is there a chance to put the footer on the bottom of the page on mobile devices?

Thx!

[RahulModerator]

Hey There,

Thanks for writing in!

We’re unable to replicate what you are trying to accomplish. Can you provide us with some more information, may be a Screenshot?

Thanks for understanding.

[mwiedmannParticipant]

Please see the attached file. In mobile view the footer (“Impressum”, “Datenschutz” and social media menu) is squeezed into the logo.

I ‘m looking for a way that in mobile view the footer shows on the very bottom of the page (like in the default setting).

[FriechModerator]

Hi There,

Can you find this line on the code that was provided to add the footer menu on the header?

<div class="center-text">

Please update that to this:

<div class="custom-navbar center-text">

Then paste this on Custom > Global JavaScript on Customizer.

jQuery( document ).ready(function($) {
  $(".touchevents .custom-navbar").insertAfter(".touchevents .x-main");
});

Hope it helps, Cheers!

[mwiedmannParticipant]

Thx for the help – unfortunately it still looks like this (see attached file).

[Nabeel AModerator]

Hi again,

Did you check it on actual mobile device? Because the above code will only work for actual mobile devices, I’ve checked it on mobile devices and it’s working fine. squeezing the desktop screen won’t work. First clear your mobile browser’s cache and check the site again in mobile device.

Cheers!

[mwiedmannParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Your custom navbar has a fixed position when being displayed in desktop screens. In smaller screens, you need to change the position so that it will not overlap or have some conflict with other elements. To resolve your issue, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

@media(max-width: 979px){
  
  #menu-footer,
  .x-social-global {
    position: relative;
    width: 100%;
    margin-top: 10px;
    bottom: auto;
  }

  .custom-navbar {
      margin-top: 20px;
  }

  .x-navbar br {
    display: none;
  }

}

Please let us know if this works out for you.

[Author]

Posts