fixing the header and nav menu to the top of the page

Shapely
1

Hello.
this is the site i’m building with Shapely:
http://warjakka.com/

i have an issue with jumping to HTML anchors (on the Art Lab page) - the anchor appears underneath the header/menu area. is there a way to disable the parallax thing that makes the header/menu pop back onscreen when you scroll down? basically, if i can’t get the anchors to appear just below the menu, it would be better if the menu was fixed to the top of each page.

best wishes,

john

2

i just found the css that will fix the header:

nav.fixed
{ position: absolute;
}

but the page does an ugly little jump when first scrolling down - is there a way to fix this?

3

hey there

You may add margin or padding-top to your anchors, something like this:

h3#rituaali {
margin-top: 30px;
}

Thanks

4

hello - thanks for your advice, but it doesn’t seem to work, whether i add it in the Additional CSS box in the settings for the anchor on the page, or if i add it in the customiser for the whole site

5

Hey there

You can try to increase margins a little bit, please add code and let me see it :slight_smile:

6

so where is the best place to add this code?

7

hi there

By default its an appearance > customize > additional css, this is where WordPress stores CSS codes :slight_smile:

8

that’s where i normally store CSS, but i noticed that each h3 header has its own little Additional Code space in the Advanced tab.
anyway, i put the margin-top CSS in for all the anchors and they still appear right at the top of the page.
(the page is now called Taidepolku)

9

Hi

Ok, I see, please change margin by padding and check agian, I believe it will work

10

thanks - changing it to padding works ok.

11

Hi, there

I will close this case now, Feel free to contact us again if you have other questions

Thanks!