Sticky menu covers headers when entering custom links such as


When using the static front page my sticky menu works fine (screenshot attached), however, when I enter custom links such as Website Hosting - or /#projects the sticky menu covers the section header (screenshot also attached.

For example, when entering a custom link my site acts as if the sticky menu is not active and pushes the top of the section header to the top of the browser window.

Does anyone have any advice on how to resolve this?


Hi there

Hope you are having a good day and thank you for your question :slight_smile:

please provide url and i will take a look


Extreme delay in replying on my behalf.

If you click on any of the top header menu items on my site the page successfully scrolls to the top h3 on each page section. If you enter the page ID as a custom URL the page fails to scroll correctly.

For example, if you enter you will see the top header menu covers up page section titles. This is the same for other sections such as #projects #latest-news #contact etc.

Password to view my website is:


Hey there

I understand your problem but i have completely different working behavior on my side, please take a look here:



You are correct in that the sticky menu functions correctly when a user clicks on a menu item. The issue is that when a user enters the URL manually appended with a page ID the sticky menu does not function correctly and covers page headers.

For example, if you enter into a browser and click on about in the menu header the sticky menu is fine.

If you manually type into a browser the sticky menu covers the page section header.

Demonstrating the problem in HTML, if I were to enter

<a href="">ABOUT SECTION LINK</a>


I would get the result out lined in the screenshot below. As you can see the sticky menu is covering the page header. This issue applies to all page ID’s not just the about section.

Screen Shot 2020-11-18 at 10.13.14


Hi there

Ok, got it, this css code can help you in this case:

#about .section-header h3, #projects .section-header h3, #latest-news .section-header h3, #contact-us .section-header h3 {
    margin-top: 110px;
    margin-bottom: 50px;

Add it in the Appearance > customize > additionally css

Hey thanks for the extra info,

I’m wanting to avoid styling any elements in the illdy theme template as I have customised it exactly as I want it as of now. I believe the misalignment of the sticky menu isn’t a problem that can be resolved through CSS and rather PHP.

Do you know why the sticky menu would function correctly when visiting my website’s home page but not when you manually enter page IDs?



Hi Dan

Sorry, but I don’t know, I have only this solution and no problem with this :slight_smile:


It appears that there may be a bug when targeting section id’s in the URL of a website using the illdy theme. When doing this front page sections do not take the height of the sticky header into account. Counter to this, the page scroll to section id feature works fine once the page is loaded. This problem is specific to URL targeted sections. On the illdy theme demo site this anomaly is not evident as the sticky menu is not actiavted, and would therefore not be encountered until well into the site building process - which happened in my case. I appreciate that the behaviour of this feature may be intentional, but I wanted to raise it nevertheless.

Installing the WordPress plugin ‘Page Scroll to id’, allows for a feature called ‘Scrolling from/to different pages (scrolling to target id on page load)’.

This feature allows for the front page to load and automatically scroll to a page section when it is targeted in a URL or html <href="#">. You can also apply a pixel based offset than only effects URL or html <href="#"> targeted section id’s, and does not affect the aesthetics of page section once the page has loaded - as the illy theme uses divs for section ids.

Plugin website: Page scroll to id – WordPress plugin |

Example of the effect: