How to edit navigation top and custom header for Static front page?

  • Resolved Supriya Gusain

    (@gsupriya)


    6 years, 7 months ago

    Hi there,
    I am using Twenty Seventeen child theme. For home page i am using static front page where i just want to show fixed navigation-top on top and a full screen video without any content and footer area. I have been using this for hiding content and footer –
    .home #content {
    display: none;
    }

    .home .site-footer {
    display:none;
    }
    Want to know if its a good way to do that? Also how i can move navigation to top and add a video full screen?

    Thanks for the help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What do you mean by “fixed navigation-top on top”?

    Thread Starter Supriya Gusain

    (@gsupriya)

    Thanks for your reply!

    Something like this – fixed navigation on top

    Like i have already done that but there are many issues in different resolutions. I don’t want Header media on top of my site.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the “Additional CSS” section of the dashboard add this:

    
@media screen and (min-width: 768px) {
    
    .navigation-top {
        top: 0;
        bottom: auto;
        position: fixed;
    }
}

    https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

    Thread Starter Supriya Gusain

    (@gsupriya)

    You saved my day! It is working fine now in all resolutions.
    Thank you so much.

    Hi Andrew,
    I am also trying to have a fixed top navigation menu and using the suggested CSS the homepage works fine, but all other pages do not…
    What happens:
    – the menu covers partially the header image section shown and the site logo… (I am sorry I cannot share a screenshot…)
    – Below the header image remains an empty space (same as the menu height…) before the content

    Any suggestion to fix this ?

    Thanks, K

    PS: to show also the admin bar (when logged in) I added also the following CSS:

    .admin-bar .navigation-top{
    top: 32px;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I can’t help you with the admin bar, but else try this instead:

    

@media screen and (min-width: 768px) {
    
    .navigation-top {
        top: 0;
        bottom: auto;
        position: fixed;
    }

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
        margin-bottom: 0 !important;
        padding-top: 77px;
    }
}

    Hi Andrew,
    the additional CSS solved the problem, thanks again !!

    About admin bar here what I didi to be also able to properly show the admin bar (only when logged in):

    @media screen and (min-width: 768px) {
    .navigation-top {
        top: 0;
        bottom: auto;
        position: fixed;
    }
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
        margin-bottom: 0 !important;
        padding-top: 77px;
    }
     .admin-bar .navigation-top{
	top: 32px;
    }
}

    Regards,
    K

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to edit navigation top and custom header for Static front page?’ is closed to new replies.