html navigation scroll issue Topic is solved

General questions relating to Joomla! 4.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
neojw1505
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Wed Aug 11, 2021 12:44 pm

html navigation scroll issue

Post by neojw1505 » Fri Sep 24, 2021 2:24 pm

I have a page that have html navigation. When I click on the textbook order button https://prnt.sc/1tgtgwz.
The page will scroll down, but the page will look like this https://prnt.sc/1tgtxxx. It seems like the sticky header is the reason why it looks like the html navigation is scrolling too far down.

I would like to make it so that when I click on the button, it takes into account the fixed header height and scroll to the position where the header is not covering the section title.

I have checked online and tried some of their css solution but it only distort the content on the webpage. The sticky header is created using helix ultimate template.

Thanks for taking the time to read this and have a good day.

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Tue Jun 30, 2020 12:17 pm

Re: html navigation scroll issue

Post by Pavel-ww » Fri Sep 24, 2021 2:29 pm

neojw1505 wrote:
Fri Sep 24, 2021 2:24 pm
I would like to make it so that when I click on the button, it takes into account the fixed header height and scroll to the position where the header is not covering the section title.
Hi. I think it can be quite simply solved. You need to shift anchor links to compensate for the height of the Header. Specific solution depends on how you created these links. So not to spend time and get fast help provide the link on the page with the problem.

neojw1505
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Wed Aug 11, 2021 12:44 pm

Re: html navigation scroll issue

Post by neojw1505 » Mon Sep 27, 2021 12:55 am

Pavel-ww wrote:
Fri Sep 24, 2021 2:29 pm
neojw1505 wrote:
Fri Sep 24, 2021 2:24 pm
I would like to make it so that when I click on the button, it takes into account the fixed header height and scroll to the position where the header is not covering the section title.
Hi. I think it can be quite simply solved. You need to shift anchor links to compensate for the height of the Header. Specific solution depends on how you created these links. So not to spend time and get fast help provide the link on the page with the problem.
the anchor links are from a custom html module.

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Tue Jun 30, 2020 12:17 pm

Re: html navigation scroll issue

Post by Pavel-ww » Mon Sep 27, 2021 5:35 am

neojw1505 wrote:
Mon Sep 27, 2021 12:55 am
the anchor links are from a custom html module.
Hi. Doesn't say anything. Provide a link.

neojw1505
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Wed Aug 11, 2021 12:44 pm

Re: html navigation scroll issue

Post by neojw1505 » Mon Sep 27, 2021 5:41 am

Hi I have pmed you

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Tue Jun 30, 2020 12:17 pm

Re: html navigation scroll issue

Post by Pavel-ww » Mon Sep 27, 2021 7:21 am

neojw1505 wrote:
Mon Sep 27, 2021 5:41 am
Hi I have pmed you
You can solve it in two ways.
The first option to use plugin. In the settings of this plugin you can set offset.

Code: Select all

https://blackforest-software.com/index.php/en/development-tools/qlsmoothscroll/download
The second option, without using the plugin. To solve, I need to know if you can add your own code in somewhere of this block? Is there any access to the code of this block? If so, what exactly is the block (class name) in which you can add your code.
1.jpg


Does not apply to the topic, just advice. It would make better use of such a structure for navigation instead of yours.
2.jpg
type="button" attribute apply only for button tag if it is belongs to form tag, but not for a tag.

And if you want to take care of accessibility, then it is better such structure.
3.jpg
You do not have the required permissions to view the files attached to this post.

neojw1505
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Wed Aug 11, 2021 12:44 pm

Re: html navigation scroll issue

Post by neojw1505 » Mon Sep 27, 2021 8:21 am

Ok, I prefer to go for the non-plugin method. Yes I have access to that block of code it is in a file called default.php in my booklist/tmpl folder. I am able to add javascript there too if that is what you are looking to do.

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Tue Jun 30, 2020 12:17 pm

Re: html navigation scroll issue

Post by Pavel-ww » Mon Sep 27, 2021 8:50 am

neojw1505 wrote:
Mon Sep 27, 2021 8:21 am
Ok, I prefer to go for the non-plugin method. Yes I have access to that block of code it is in a file called default.php in my booklist/tmpl folder. I am able to add javascript there too if that is what you are looking to do.
Then very simple. Add an empty DIV with ID for link and with class for using in css.
4.jpg
Change the link in the button
5.jpg
And use the following CSS code to compensate the Header height

Code: Select all

#textbook-order {
    position: relative;
}
.my-link {
    position: absolute;
    left: 0;
    top: -70px;
}
Hope you know where css should be added in Helix?
You do not have the required permissions to view the files attached to this post.

neojw1505
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Wed Aug 11, 2021 12:44 pm

Re: html navigation scroll issue

Post by neojw1505 » Mon Sep 27, 2021 9:29 am

Yes I know where to add the css. I have a custom.css file. Thank you very much for taking the time to help me, it's working now but I would like to understand why is there a need for the empty div and how does it help? Could you kindly explain? Thanks once again :)

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Tue Jun 30, 2020 12:17 pm

Re: html navigation scroll issue

Post by Pavel-ww » Mon Sep 27, 2021 9:50 am

neojw1505 wrote:
Mon Sep 27, 2021 9:29 am
one thing i dont understand is why is there a need for the empty div?
With this div, you create an anchor for link instead that you used before and displacing this div up to the Header height. Anchor always extended to the upper border of the browser. Since Header has position: fixed ;, it falls out of the flow elements and is not considered when an anchor actuation links. Therefore, overlaps, as an anchor link sends to the upper border of the browser.

Before
1.jpg
After
2.jpg
You do not have the required permissions to view the files attached to this post.

neojw1505
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Wed Aug 11, 2021 12:44 pm

Re: html navigation scroll issue

Post by neojw1505 » Mon Sep 27, 2021 10:07 am

Pavel-ww wrote:
Mon Sep 27, 2021 9:50 am
neojw1505 wrote:
Mon Sep 27, 2021 9:29 am
one thing i dont understand is why is there a need for the empty div?
With this div, you create an anchor for link instead that you used before and displacing this div up to the Header height. Anchor always extended to the upper border of the browser.
Sorry, I could not understand what you meant by this part. I understand why the header is out of the flow element hence overlapping.

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Tue Jun 30, 2020 12:17 pm

Re: html navigation scroll issue

Post by Pavel-ww » Mon Sep 27, 2021 10:50 am

neojw1505 wrote:
Mon Sep 27, 2021 10:07 am
I could not understand what you meant by this part.
Sorry. I am not a native English speaker.
Let's try again. :)
That's how you had before.
1.jpg
When clicking on the button, anchor jumps to the upper border of the browser.
2.jpg
With an empty div we created a new anchor and put it up to the distance equal to the Header height + 10px.
3.jpg
And now, when clicking on the button, the following happens - anchor jumps to the upper border of the browser, but your block title not overlaping by Header. Since it is located at a distance from anchor, equal to the Header height + 10px.
4.jpg
You do not have the required permissions to view the files attached to this post.

neojw1505
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Wed Aug 11, 2021 12:44 pm

Re: html navigation scroll issue

Post by neojw1505 » Mon Sep 27, 2021 1:57 pm

Oh that makes much more sense now. Thank you very much for the very detailed response and once again thanks alot for your help! :)

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Tue Jun 30, 2020 12:17 pm

Re: html navigation scroll issue

Post by Pavel-ww » Tue Sep 28, 2021 7:08 am

You are wellcome


Post Reply

Return to “General Questions/New to Joomla! 4.x”