Decrease Navigation Footer on Mobile

Support
#1

Hello - when using my iPhone, I noticed that my website has a very large footer spacing below the menu. Can this be decreased?

On another note, I also noticed that the words “Get in Touch” are overlapping an area. Can this be corrected on the mobile? It does not overlap on the desktop site.

#2

Hi Samantha,

Please add this code in X > Theme Options > CSS:

@media (max-width: 480px) {
    .x-colophon.top {
        padding-top: 20%;
    }
}

Hope this helps.

#3

It worked!!! May I ask about the navigation item listed up top as well?

#4

Hi Samantha,

Please try this code:

@media (max-width: 979px) {
    .x-navbar-inner {
        min-height: 50px;
    }
}

Hope this helps.

#5

Unfortunately that code didn’t work?

#6

Hey Samantha,

I tested the code provided by Jade and it works as expected, I checked your site and couldn’t find the code being added. There could be a syntax error in your Global CSS which is preventing the code to work if you’ve already added the code in the Theme Options > CSS. Try adding the following code at the top of your Global CSS and see if this work:

@media screen and (max-width: 979px) {
    .x-navbar-inner {
        min-height: 50px;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#7

Still not working :frowning:

#8

Hi Samantha,

I also add the CSS code below to force the main content to sit higher.

  .x-container>.offset {
    margin-top: 10px;
  }

You can play with 10px to find the best value. To find the coe you need to go to WordPress Dashboard > X > Theme Options > CSS.

Thank you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.