WordPress.org

Forums

Twenty Fourteen
Page Content Scrolling Into Header Area (13 posts)

  1. enjoli
    Member
    Posted 1 year ago #

    I do not have a header image but there is a blank space above the header menu bar. When I scroll down the page, the content of the page scrolls up past the header menu and into that greyish blank space at the top where the header image would be if I in fact had one. I need the header menu to be fixed and have the scrolling content end where the header menu begins. Can anyone help me? :) Thanks ahead of time.

  2. theseamonster
    Member
    Posted 1 year ago #

    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:
    http://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.

  3. Devora
    Member
    Posted 1 year ago #

    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.

  4. Devora
    Member
    Posted 1 year ago #

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

    to hide the top grey area, try:

    adding to the code above,

    display: none;

  5. theseamonster
    Member
    Posted 1 year ago #

    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.

    http://www.amandaseaman.com

  6. theseamonster
    Member
    Posted 1 year ago #

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

  7. theseamonster
    Member
    Posted 1 year ago #

    I also tried using position: absolute

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

    and that did not work....

  8. enjoli
    Member
    Posted 1 year ago #

    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?

  9. theseamonster
    Member
    Posted 1 year ago #

    :/

  10. enjoli
    Member
    Posted 1 year ago #

    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?

  11. theseamonster
    Member
    Posted 1 year ago #

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

  12. enjoli
    Member
    Posted 1 year ago #

    I just visited your website http://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!

  13. theseamonster
    Member
    Posted 1 year ago #

    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 wordpress.org 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!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic