Page Content Scrolling Into Header Area

I would also like help with this problem.

I am new at wordpress and to css. My theme is ‘clay’ by bottomless design.

my website:
https://www.amandaseaman.com

I made a child theme via wordpress instructions (but honestly have no idea about css other than things I read here).
Should I use the style.css to fix my header? Or should I use the “custom css” box in the appearance >> “theme options” section of my dashboard?

And what is the code I should use?

Also is there a way to make my header longer?

Thank you for your help.

the sea monster, For starters, you are best advised to use the custom css under theme options rather than editing the style.css file.

Try copying and making changes to this code

#logo-nav-inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
}
and this one
#logo-nav-inner {
height: 100px;
}

enjoli, if the info provided does not help you, please post a link to your site.

#description-social-outer{
color: #555555 !important;
}

to hide the top grey area, try:

adding to the code above,

display: none;

Hi arty9k,

I inserted the code you posted and it did not work.

Anything else that you could suggest I try?

Thanks again for your help.

https://www.amandaseaman.com

I also tried

.site-header {
position: relative;
top: 0;
width: 100%;
z-index: 2000;
}

per a suggestion from another site and that did not work either…

I also tried using position: absolute

per this site: https://www.w3schools.com/css/css_positioning.asp

and that did not work….

None of these options worked for me. I tried putting the codes given into the custom css portion as well as fiddling with the actual header file using notepad++ but nothing is fixing the problem.

I cannot post the link to my website because it is adult in nature.

Has anyone found a fix?

:/

So, when I open my page up in Chrome and in IE I don’t have the issue anymore. It seems that the issue is only with Firefox. Any thoughts?

I am using chrome but those codes did not work for me.

I just visited your website https://www.amandaseaman.com and it looks like you figured it out. Can you help me? Also, how did you get the social media buttons on the top right? ?? Thanks so much!

enjoli….I totally figured it out, here is how I did it:

I left click-ed on the header and in the drop down menu that appears i chose “inspect element”. This brings up the CSS for your website. It allows you to play with your website by changing all the values, and seeing what it does right right before your eyes.
And it only makes the changes in that window, so there isn’t a chance of live-editing and crashing up your website while people are viewing. It also tells you where in the CSS you can find the values you are playing with.

How I got my header to move with the rest of my website, rather than being “relative”:
Using the CSS editor in my www.ads-software.com dashboard:

My theme is responsive so I went to the “media” section and under “desktop”

#masthead {
position: absolute;

It used to have a value of “Relative” but I changed it to “absolute”.

hope that helps!