Monochrome Pro (newest version) – Remove White Space at Top of Website

[flailiak]

Hello, I recently upgraded to the latest version of Monochrome Pro, and there is an extra white space at the top of the website sitewide I would like to remove.

Does anybody please know how to remove this white space at the top of my website?

https://www.maximizingmoney.com

When I inspect the element, it shows it as ul.genesis-skip-link, and it says it's 45px in size.

I've searched through my CSS to find this and can't seem to do it.

Does anybody have any ideas please?

Also, if you know, what's the purpose of this white space, can something be added up there like a menu or other text or something?

Thank you so much for your help. It just seems like wasted space, especially on a mobile browser.

https://www.maximizingmoney.com

[Anita]

In the stylesheet look for this:

.site-inner {
    background-color: #fff;
    clear: both;
    margin-top: 100px;
    max-width: 1200px;
    position: relative;
    word-wrap: break-word;
    z-index: 999;
}

There is a 100px top margin. Change that.

---

Love coffee, chocolate and my Bella!

[flailiak]

Hello Anita,

Thank you so much for providing me with assistance.

When I change the 100px top margin for those site-inner settings, it changes the white space that sits just below my menu/title bar (the green bar) and above the first post title.

However, I am trying to adjust the white space that sits above my menu/title bar at the top of the website.

I really do appreciate your help with my issue.

Thank you very much.

[Anita]

Try disabling your caching plugin to see if that changes it. I can't see all of the code because of the caching.

---

Love coffee, chocolate and my Bella!

[flailiak]

I was able to see the changes you suggested take place on the live website, so it's not that I don't see any changes due to the caching plugin.

However, the site-inner section you mentioned is not resolving the issue I am having.

I want to remove the white space at the top of my website, above the menu bar, while the site-inner coding affects the white space below the menu bar.

It has to be related to some other section of coding in the stylesheet, unless I'm not understanding what you are saying.

Thank you again.

[Anita]

Some times caching will prevent certain code from displaying properly. The code looks fine. You may have an error in the stylesheet somewhere or something in the Genesis Header Scripts possibly.

Run your code through the validator- https://jigsaw.w3.org/css-validator/.

---

Love coffee, chocolate and my Bella!

[andytc]

The reason for the whitspace above the menu is the Skip links <ul><li> have padding applied to them as below -

li {
    list-style-type: none;
    padding-bottom: 15px;
}

That CSS will apply to all list items , we don't want that on the skip links <li> ... so

Add this into custom css -

.genesis-skip-link li {
  padding: 0;
}

[flailiak]

Hello andytc,

Thank you very much for your help.

Your solution definitely addressed my issue, and I can remove the white space now.

I really appreciate you coming through and helping me out.

Best wishes.

[flailiak]

Hello Anita,

Thank you for that css validator website link, I will definitely use that in the future to check for errors.

I appreciate your help and patience.

Best of luck.

[Author]

Posts