Support » Theme: Twenty Seventeen » How to edit navigation top and custom header for Static front page?

  • Resolved Supriya Gusain

    (@gsupriya)


    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”?

    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.wordpress.org/CSS#Custom_CSS_in_WordPress

    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.