[Resolved] Delete Space on Mobile between Navigation & Top

[Ivan]

Hello on the mobile version of my website there is a space above the navigation.

Look here: https://i.imgur.com/I18d8Wr.png

I found out it is the .inside-header so i add this code.

.inside-header {
    padding: 0px 40px 0px 40px;
}

On the Browser preview it works, the space aboe the navigation disapears, but when i add the code to the Custom CSS nothing is changing. Why?

[Leo]

Hi there,

Can you link me to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Ivan]

I add the Link. Thank you

[Leo]

Hmm your code should work. However I’m not seeing it being added.

Any caching plugins?

Also if there are other CSS in custom CSS above, make sure there are no errors which stop the code from executing.

Let me know.

[Ivan]

The code is added but nothig happens here look this is the custom CSS.

@media (min-width: 769px) {
  .site-header {
    display: none;
  }
	
.inside-header {
    padding: 0px 40px 0px 40px;
}

.gen-sidebar-nav  {
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 1;
    background-color: #222C3C;
    background-repeat: no-repeat;
    background-position: top center;
    border-style: hidden;
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: #0A9E01;
  }

  .footer-widgets {
    padding-left: 20%;
  }

  .site-info {
    padding-left: 20%;
  }
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    box-shadow: inset 3px 0 0 0 #00a8ff;
}

I use a Caching plugin also.

[Tom]

That code is inside the media query, so it will only apply on desktop.

Try adding it to the very bottom of your custom CSS.

Alternatively, you can set the top padding to 0 in Customize > Layout > Header.

[Ivan]

Thank you Tom, it works now!

[Tom]

Awesome – no problem! 🙂

[Author]

Posts