Sticky menu covers headers when entering custom links such as mysite.com/#about

Hello,

When using the static front page my sticky menu works fine (screenshot attached), however, when I enter custom links such as Website Hosting - Mysite.com 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?

Dan

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

Hello,

Extreme delay in replying on my behalf.

If you click on any of the top header menu items on my site https://www.bolomedia.co.uk 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 https://www.bolomedia.co.uk/#about 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:
HolioTen

Dan

Hey there

I understand your problem but i have completely different working behavior on my side, please take a look here:
https://www.loom.com/share/47c81eff9da3435a846ac77cc62def5d

ISSUE STILL UNRESOLVED

Hey,

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 https://bolomedia.co.uk into a browser and click on about in the menu header the sticky menu is fine.

If you manually type https://www.bolomedia.co.uk/#about into a browser the sticky menu covers the page section header.

Demonstrating the problem in HTML, if I were to enter

<a href="https://www.bolomedia.co.uk/#about">ABOUT SECTION LINK</a>

HTML LINK: ABOUT SECTION LINK

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

Dan

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?

Dan

Dan

Hi Dan

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

SOLVED AND SHARING WORK AROUND!

THE ISSUE
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.

THE SOLUTION
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 | WordPress.org

Example of the effect: danedits.co.uk/#projects

Dan